示例頁面源碼:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
#wai{ width:500px; background:#000; height:500px;overflow:hidden}
#nei { float:left; width:600px; height:60px; background:blue;}
</style>
</HEAD>
<BODY>
<div id="wai">
<div id="nei"></div>
</div>
</BODY>
</HTML>
當外層div設置overflow:hidden屬性,內層div設置了float:left,如果同時寬度超過外層div,會自動截取內層div width,以適合外層width.
}
另外，我們再做一個試驗，將wai這個div的高度值刪除後，我們發現，wai的高度自動的被nei這個div的高度值給撐開了。
我們來來理解一下float,“浮動”這個詞的含義。
我們原先的理解是，在一個平面上的浮動，但是通過這個試驗，我們發現，這不僅僅是一個平面上的浮動，而是一個立體的浮動！
也就是說，當nei這個div加上float這個屬性的時候，它已經脫離了wai這個div，也就是說，此時的nei的寬高是多少，對於已經脫離了的wai來說，都是不起作用的。
當我們理解了浮動這個詞後，再來理解overflow:hidden清除浮動的意思。也就是說，當我們給wai這個div加上overflow:hidden這個屬性的時候，其中的nei等等帶浮動屬性的div的浮動屬性被清除了.
這就是overflow:hidden這個屬性清除浮動的準確含義。
當我們沒有給wai這個div設置高度的時候，nei這個div的高度，就會撐開wai這個div，而在另一個方面，我們要注意到的是，當我們給wai這個div加上一個高度值，那麼無論nei這個div的高度是多少，wai這個高度都是我們設定的值。而當nei的高度超過wai的高度的時候，超出的部分就會被隱藏。這就是隱藏溢出的含義！