overflow:hidden的做用

功能一、隱藏溢出

在IE6下，當子容器的寬高超出父容器時，父容器就會被撐開來。

要想解決這個問題，在父容器中除定義寬和高的值之外，還必須寫overflow:hidden，這樣就能把子容器的其它內容隱藏。

可是在火狐或者其餘瀏覽器裏面，咱們發現問題並不是如此簡單。咱們發現，當子容器這個div的寬度和高度都大於父容器這個div的時候，父容器並無被內撐開而是依舊顯示爲咱們指定的寬高。

例如：結構以下：

<div id="wai">

  <div id="nei"></div>

</div>

css代碼：

#wai{ width:200px;  background:#000; height:200px; border:2px blue solid; }

#nei { float:left; width:300px; height:300px; background:red;}

在IE6中顯示以下圖：

wai層div被nei層div撐開。

在IE七、IE八、FF中顯示以下圖：

wai並無被nei撐開而是依舊顯示爲咱們指定的寬高。

可是若是咱們在#wai中加上overflow:hidden; 顯示就會變化了，nei的寬高自動的被隱藏掉了。

總之，當咱們沒有給wai這個div設置高度的時 候，nei這個div的高度，就會撐開wai這個div，而在另外一個方面，咱們要注意到的是，當咱們 給wai這個div加上一個高度值，那麼不管nei這個div的高度是多少，wai這個高度都是咱們設定的值。而當nei的高度超過wai的高度的時候， 超出的部分就會被隱藏。這就是隱藏溢出的含義!

功能二、消除浮動

當nei這個div加上浮動這個屬性的時候，在顯示器的側面，它已經脫離了wai這個div，也就是說，此時的nei的寬高是多少， 對於已經脫離了的wai來講，都是不起做用的。當咱們全面的理解了浮動這個詞的含義的時候，咱們就理解overflow:hidden這個屬性中的解釋， 清除浮動是什麼意思了。也就是說，當咱們給wai這個div加上overflow:hidden這個屬性的時候，其中的nei等等帶浮動屬性的div的在這個立體的浮動已經被清除了。