overflow:hidden這個CSS樣式是大家常用到的CSS樣式,但是大多數人對這個樣式的理解僅僅局限於隱藏溢出,而對於清除浮動這個含義不是很了解。一提到清除浮動,我們就會想到另外一個CSS樣式:clear:both,我相信對於這個屬性的理解大家都不成問題的。但是對於“浮動”這個詞到底包含什麼樣的含義呢?我們下面來詳細的闡述一下。
這是一個常用的div寫法,下面我們來書寫樣式。大家可以在DMX中自己做試驗
#box{
width:500px;
background:#000;
height:500px;
}
#content {
float:left;
width:600px;
height:600px;
background:red;
}
給box這個div加了一個overflow:hidden這個屬性解決了這個問題。我們直到overflow:hidden這個屬性的作用是隱藏溢出,給box加上這個屬性後,我們的content 的寬高自動的被隱藏掉了。另外,我們再做一個試驗,將box這個div的高度值刪除後,我們發現,box的高度自動的被content 這個div的高度值給撐開了。
說到這裡,我們再來理解一下“浮動”這個詞的含義。
我們原先的理解是,在一個平面上的浮動,但是通過這個試驗,我們發現,這不僅僅是一個平面上的浮動,而是一個立體的浮動!也就是說,當content 這個div加上浮動這個屬性的時候,在顯示器的側面,它已經脫離了box這個div,也就是說,此時的content 的寬高是多少,對於已經脫離了的box來說,都是不起作用的。
打個形象的比喻就是當JJ脫離BB的時候,JJ的大小對於BB是沒有撐開的作用的(有點少兒不宜的感覺-_-|||) OK,當我們全面的理解了浮動這個詞的含義的時候,我們就理解overflow:hidden這個屬性中的解釋,清除浮動是什麼意思了。也就是說,當我們給box這個div加上overflow:hidden這個屬性的時候,其中的content 等等帶浮動屬性的div的在這個立體的浮動已經被清除了,就好比JJ又進入了BB內,JJ的大小自然又會影響到BB的大小。這就是overflow:hidden這個屬性清除浮動的准確含義。
當我們沒有給box這個div設置高度的時候,content 這個div的高度,就會撐開box這個div,而在另一個方面,我們要注意到的是,當我們給box這個div加上一個高度值,那麼無論content 這個div的高度是多少,box這個高度都是我們設定的值。而當content 的高度超過box的高度的時候,超出的部分就會被隱藏。這就是隱藏溢出的含義!
火狐裡面解釋的就是這個意思(float的屬性就是立體漂浮,IE7和火狐都是這個意思了,IE6是不管外面的層的屬性content 會直接撐開box的),所以才在 height的auto屬性中加入!important這個值!讓他在IE7中優先執行這個命令兒忽略overflow:hidden;這個命令!