全面闡述overflow hidden屬性

2021-05-21 19:49:12 字數 1491 閱讀 2184

之前說過這個overflow的各種屬性,其中也包括可這個overflow:hidden屬性。之前我也不知道overflow:hidden還可以清楚浮動。現在我就把這一部分呢也貼出來大家一起學習下吧。。。

overflow:hidden這個css樣式是大家常用到的css樣式,但是大多數人對這個樣式的理解僅僅侷限於隱藏溢位,而對於清除浮動這個含義不是很了解。

這是乙個常用的div寫法,下面我們來書寫樣式。大家可以在dmx中自己做試驗

#wai

#nei

可以看到,我給nei這個id加了乙個浮動,我們常規的理解是,我們允許nei這個id的div的右邊出現其他的內容,只要它的寬度不超過wai這個div和nei這個div的剩餘值。

如果div wai中還包含其他的div,我不允許它出現在nei的右側,我們則用樣式clear:both指定這個div,不允許它浮動在nei右側。

這些在ie6裡面是正確的。但是在火狐或者其他瀏覽器裡面,我們發現問題並非如此簡單。我們發現,當nei這個div的寬度和高度都大於wai這個div的時候,wai並沒有被內撐開而是依舊顯示為我們指定的寬高。在我的例子中,都是500。

這個時候我不理解了,我搜尋了很多的資料,但是都沒能理解這是為什麼,直到看到別人在類似的情況下給wai這個div加了乙個overflow:hidden這個屬性解決了這個問題。

我們直到overflow:hidden這個屬性的作用是隱藏溢位,給wai加上這個屬性後,我們的nei的寬高自動的被隱藏掉了。另外,我們再做乙個試驗,將wai這個div的高度值刪除後,我們發現,wai的高度自動的被nei這個div的高度值給撐開了。

說到這裡,我們再來理解一下「浮動」這個詞的含義。我們原先的理解是,在乙個平面上的浮動,但是通過這個試驗,我們發現,這不僅僅是乙個平面上的浮動,而是乙個立體的浮動!

也就是說,當nei這個div加上浮動這個屬性的時候,在顯示器的側面,它已經脫離了wai這個div,也就是說,此時的nei的寬高是多少,對於已經脫離了的wai來說,都是不起作用的。打個形象的比喻就是當jj脫離bb的時候,jj的大小對於bb是沒有撐開的作用的(有點****的感覺-_-|||)

ok,當我們全面的理解了浮動這個詞的含義的時候,我們就理解overflow:hidden這個屬性中的解釋,清除浮動是什麼意思了。也就是說,當我們給wai這個div加上overflow:hidden這個屬性的時候,其中的nei等等帶浮動屬性的div的在這個立體的浮動已經被清除了,就好比jj又進入了bb內,jj的大小自然又會影響到bb的大小。

這就是overflow:hidden這個屬性清除浮動的準確含義。

當我們沒有給wai這個div設定高度的時候,nei這個div的高度,就會撐開wai這個div,而在另乙個方面,我們要注意到的是,當我們給wai這個div加上乙個高度值,那麼無論nei這個div的高度是多少,wai這個高度都是我們設定的值。而當nei的高度超過wai的高度的時候,超出的部分就會被隱藏。這就是隱藏溢位的含義!

我相信,通過我的這些文字,大家對overflow:hidden這個屬性有了全新的認識。希望大家和我一樣,在div+css學習中能夠不斷的進步!

全面闡述搜尋引擎技術 應用及商業模式

為什麼連續兩年全球資本均看好搜尋引擎公司 家為全球最大的搜尋引擎公司,一家為全球最大的中文搜尋引擎公司?為什麼搜尋引擎具有如此大的 殺傷力 會成為繼網際網路第一波的門戶 以及第二波的網路遊戲 簡訊 電子郵件之後,成為網際網路第三波的新主?本報將通過系列報道與分析全面闡述搜尋引擎的技術 應用,搜尋引擎...

全面闡述搜尋引擎技術 應用及商業模式

為什麼連續兩年全球資本均看好搜尋引擎公司 家為全球最大的搜尋引擎公司,一家為全球最大的中文搜尋引擎公司?為什麼搜尋引擎具有如此大的 殺傷力 會成為繼網際網路第一波的門戶 以及第二波的網路遊戲 簡訊 電子郵件之後,成為網際網路第三波的新主?本報將通過系列報道與分析全面闡述搜尋引擎的技術 應用,搜尋引擎...

闡述overflow hidden屬性

overflow hidden這個css樣式是大家常用到的css樣式,但是大多數人對這個樣式的理解僅僅侷限於隱藏溢位,其實他還有清除浮動這個含義。這是乙個常用的div寫法,下面我們來書寫樣式。大家可以在dmx中自己做試驗 wai nei 可以看到,我給nei這個id加了乙個浮動,我們常規的理解是,我...