overflow:hidden這個CSS樣式是大家常用到的CSS樣式，但是大多數人對這個樣式的理解僅僅局限於隱藏溢出，而對於清除浮動這個含義不是很了解。
一提到清除浮動，我們就會想到另外一個CSS樣式：clear:both，我相信對於這個屬性的理解大家都不成問題的。但是對於“浮動”這個詞到底包含什麼樣的含義呢？我們下面來詳細的闡述一下。
這是一個常用的div寫法，下面我們來書寫樣式。大家可以自己做試驗
#wai{ width:500px; background:#000; height:500px;}
#li { float:left; width:600px; height:600px; background:red;}
可以看到，我給li這個id加了一個浮動，我們常規的理解是，我們允許li這個id的div的右邊出現其他的內容，只要它的寬度不超過wai這個div和nei這個div的剩余值。
如果div wai中還包含其他的div，我不允許它出現在nei的右側，我們則用樣式clear:both指定這個div，不允許它浮動在li右側。
這些在IE6裡面是正確的,但是在火狐或者其他浏覽器裡面，我們發現問題並非如此簡單。我們發現，當li這個div的寬度和高度都大於wai這個div的時候，wai並沒有被內撐開而是依舊顯示為我們指定的寬高,在我的例子中，都是500。
這個時候我不理解了，我搜索了很多的資料，但是都沒能理解這是為什麼，直到看到別人在類似的情況下給wai這個div加了一個overflow:hidden這個屬性解決了這個問題。
我們直到overflow:hidden這個屬性的作用是隱藏溢出，給wai加上這個屬性後，我們的li的寬高自動的被隱藏掉了。另外，我們再做一個試驗，將wai這個div的高度值刪除後，我們發現，wai的高度自動的被li這個div的高度值給撐開了。
說到這裡，我們再來理解一下“浮動”這個詞的含義。我們原先的理解是，在一個平面上的浮動，但是通過這個試驗，我們發現，這不僅僅是一個平面上的浮動，而是一個立體的浮動！
也就是說，當li這個div加上浮動這個屬性的時候，在顯示器的側面，它已經脫離了wai這個div，也就是說，此時的li的寬高是多少，對於已經脫離了的wai來說，都是不起作用的。打個形象的比喻就是當你吃的雪糕脫離你的嘴的時候，雪糕的大小對於你的嘴是沒有撐開的作用的（-_-）
OK，當我們全面的理解了浮動這個詞的含義的時候，我們就理解overflow:hidden這個屬性中的解釋，清除浮動是什麼意思了。也就是說，當我們給wai這個div加上overflow:hidden這個屬性的時候，其中li等等帶浮動屬性的div的在這個立體的浮動已經被清除了，就好比雪糕又進入了你的嘴內，雪糕的大小自然又會影響到你張嘴的大小。
這就是overflow:hidden這個屬性清除浮動的准確含義。
當我們沒有給wai這個div設置高度的時候，li這個div的高度，就會撐開wai這個div，而在另一個方面，我們要注意到的是，當我們給wai這個div加上一個高度值，那麼無論li這個div的高度是多少，wai這個高度都是我們設定的值。而當li的高度超過wai的高度的時候，超出的部分就會被隱藏。這就是隱藏溢出的含義！
我相信，通過我的這些文字，大家對overflow:hidden這個屬性有了全新的認識。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd">
<html XMLns="http://www.w3.org/1999/xHtml">
<head>
<meta http-equiv="Content-Type" content="text/Html; CHARSET=gbk" />
<title>無標題文檔</title>
</head>
<style type="text/CSS">
<!--
*{margin:0px; padding:0px;}
#menu { overflow:hidden; margin:10px; width:200px; background:#000000;}
#menu h1 {
color:#00CCFF;
font-family: "宋體";
font-size: 14px;
font-style: normal;
line-height: 16px;
font-weight: normal;
font-variant: normal;
}
#menu li { display:block; padding:10px; width:178px; border:1px solid #CCCCCC; border-top-width:0px; list-style:none;}
#menu li a { display:block; width:100%; text-decoration:none;}
#menu li a span {
display:none;
padding:20px 0 0 0;
color:#FF9900;
font-family: "宋體";
font-size: 12px;
font-style: normal;
line-height: 16px;
}
#menu li a:hover { background:#000000;}
#menu li a:hover span { display:block; cursor:hand;}
-->
</style>
<body>
<ul id="menu">
<li class="end"><a href="#">
<h1>我該怎麼做？</h1>
<span>面對這樣的事實……？</span></a>
</li>
<li><a href="#">
<h1>暫時就這樣做吧！</h1>
<span>面對這樣的事實……！</span></a>
</li>
<li><a href="#">
<h1>將來也要這麼做！</h1>
<span>不管事情發展到如何地步，不管別人怎麼看待,不管未來的路有多艱辛，我都要堅定不移的走下去！</span></a>
</li>
<li><a href="#">
<h1>如果是你你怎麼選？</h1>
<span>假如這樣的事……？</span></a>
</li>
<li><a href="#">
<h1>也許大家很暈</h1>
<span>也許大家很暈，……！</span></a>
</li>
</ul>
</body>
</Html>