亚洲成AV人在线观看无码不卡,丰满中文一级无码AV,人妻丰满熟妇AⅤ无码区

您當前所在位置：首頁 → 網(wǎng)絡編程 → DIVCSS → 全面闡述overflow:hidden屬性

全面闡述overflow:hidden屬性 時間：2015-06-28 00:00:00 來源：IT貓撲網(wǎng) 作者：網(wǎng)管聯(lián)盟 我要評論(1)

overflow:hidden這個CSS樣式是大家常用到的CSS樣式，但是大多數(shù)人對這個樣式的理解僅僅局限于隱藏溢出，而對于清除浮動這個含義不是很了解。

一提到清除浮動，我們就會想到另外一個CSS樣式：clear:both，我相信對于這個屬性的理解大家都不成問題的。但是對于"浮動"這個詞到底包含什么樣的含義呢？我們下面來詳細的闡述一下。

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

#wai{ width:500px;? background:#000; height:500px;}

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

可以看到，我給nei這個id加了一個浮動，我們常規(guī)的理解是，我們允許nei這個id的div的右邊出現(xiàn)其他的內(nèi)容，只要它的寬度不超過wai這個div和nei這個div的剩余值。

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

這些在ie6里面是正確的。但是在火狐或者其他瀏覽器里面，我們發(fā)現(xiàn)問題并非如此簡單。我們發(fā)現(xiàn)，當nei這個div的寬度和高度都大于wai這個div的時候，wai并沒有被內(nèi)撐開而是依舊顯示為我們指定的寬高。在我的例子中，都是500。

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

我們直到overflow:hidden這個屬性的作用是隱藏溢出，給wai加上這個屬性后，我們的nei的寬高自動的被隱藏掉了。另外，我們再做一個試驗，將wai這個div的高度值刪除后，我們發(fā)現(xiàn)，wai的高度自動的被nei這個div的高度值給撐開了。

說到這里，我們再來理解一下"浮動"這個詞的含義。我們原先的理解是，在一個平面上的浮動，但是通過這個試驗，我們發(fā)現(xiàn)，這不僅僅是一個平面上的浮動，而是一個立體的浮動！

也就是說，當nei這個div加上浮動這個屬性的時候，在顯示器的側面，它已經(jīng)脫離了wai這個div，也就是說，此時的nei的寬高是多少，對于已經(jīng)脫離了的wai來說，都是不起作用的。打個形象的比喻就是當JJ脫離BB的時候，JJ的大小對于BB是沒有撐開的作用的（有點少兒不宜的感覺-_-|||）

OK，當我們?nèi)娴睦斫饬烁舆@個詞的含義的時候，我們就理解overflow:hidden這個屬性中的解釋，清除浮動是什么意思了。也就是說，當我們給wai這個div加上overflow:hidden這個屬性的時候，其中的nei等等帶浮動屬性的div的在這個立體的浮動已經(jīng)被清除了，就好比JJ又進入了BB內(nèi)，JJ的大小自然又會影響到BB的大小。

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

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

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

關鍵詞標簽：屬性,闡述,全面,這個,

相關閱讀

文章評論

查看所有1條評論>>