時(shí)間：2015/6/28來(lái)源：IT貓撲網(wǎng)作者：網(wǎng)管聯(lián)盟我要評(píng)論(0)
overflow:hidden這個(gè)CSS樣式是大家常用到的CSS樣式，但是大多數(shù)人對(duì)這個(gè)樣式的理解僅僅局限于隱藏溢出，而對(duì)于清除浮動(dòng)這個(gè)含義不是很了解。
一提到清除浮動(dòng)，我們就會(huì)想到另外一個(gè)CSS樣式：clear:both，我相信對(duì)于這個(gè)屬性的理解大家都不成問(wèn)題的。但是對(duì)于"浮動(dòng)"這個(gè)詞到底包含什么樣的含義呢？我們下面來(lái)詳細(xì)的闡述一下。
<div id="wai">
<div id="nei"></div>
</div>
這是一個(gè)常用的div寫法，下面我們來(lái)書寫樣式。大家可以在DMX中自己做試驗(yàn)
#wai{ width:500px; background:#000; height:500px;}
#nei { float:left; width:600px; height:600px; background:red;}
可以看到，我給nei這個(gè)id加了一個(gè)浮動(dòng)，我們常規(guī)的理解是，我們?cè)试Snei這個(gè)id的div的右邊出現(xiàn)其他的內(nèi)容，只要它的寬度不超過(guò)wai這個(gè)div和nei這個(gè)div的剩余值。
如果div wai中還包含其他的div，我不允許它出現(xiàn)在nei的右側(cè)，我們則用樣式clear:both指定這個(gè)div，不允許它浮動(dòng)在nei右側(cè)。
這些在ie6里面是正確的。但是在火狐或者其他瀏覽器里面，我們發(fā)現(xiàn)問(wèn)題并非如此簡(jiǎn)單。我們發(fā)現(xiàn)，當(dāng)nei這個(gè)div的寬度和高度都大于wai這個(gè)div的時(shí)候，wai并沒(méi)有被內(nèi)撐開而是依舊顯示為我們指定的寬高。在我的例子中，都是500。
這個(gè)時(shí)候我不理解了，我搜索了很多的資料，但是都沒(méi)能理解這是為什么，直到看到別人在類似的情況下給wai這個(gè)div加了一個(gè)overflow:hidden這個(gè)屬性解決了這個(gè)問(wèn)題。
我們直到overflow:hidden這個(gè)屬性的作用是隱藏溢出，給wai加上這個(gè)屬性后，我們的nei的寬高自動(dòng)的被隱藏掉了。另外，我們?cè)僮鲆粋�(gè)試驗(yàn)，將wai這個(gè)div的高度值刪除后，我們發(fā)現(xiàn)，wai的高度自動(dòng)的被nei這個(gè)div的高度值給撐開了。
說(shuō)到這里，我們?cè)賮?lái)理解一下"浮動(dòng)"這個(gè)詞的含義。我們?cè)鹊睦斫馐�，在一個(gè)平面上的浮動(dòng)，但是通過(guò)這個(gè)試驗(yàn)，我們發(fā)現(xiàn)，這不僅僅是一個(gè)平面上的浮動(dòng)，而是一個(gè)立體的浮動(dòng)！
也就是說(shuō)，當(dāng)nei這個(gè)div加上浮動(dòng)這個(gè)屬性的時(shí)候，在顯示器的側(cè)面，它已經(jīng)脫離了wai這個(gè)div，也就是說(shuō)，此時(shí)的nei的寬高是多少，對(duì)于已經(jīng)脫離了的wai來(lái)說(shuō)，都是不起作用的。打個(gè)形象的比喻就是當(dāng)JJ脫離BB的時(shí)候，JJ的大小對(duì)于BB是沒(méi)有撐開的作用的（有點(diǎn)少兒不宜的感覺(jué)-_-|||）
OK，當(dāng)我們?nèi)娴睦斫饬烁?dòng)這個(gè)詞的含義的時(shí)候，我們就理解overflow:hidden這個(gè)屬性中的解釋，清除浮動(dòng)是什么意思了。也就是說(shuō)，當(dāng)我們給wai這個(gè)div加上overflow:hidden這個(gè)屬性的時(shí)候，其中的nei等等帶浮動(dòng)屬性的div的在這個(gè)立體的浮動(dòng)已經(jīng)被清除了，就好比JJ又進(jìn)入了BB內(nèi)，JJ的大小自然又會(huì)影響到BB的大小。
這就是overflow:hidden這個(gè)屬性清除浮動(dòng)的準(zhǔn)確含義。
當(dāng)我們沒(méi)有給wai這個(gè)div設(shè)置高度的時(shí)候，nei這個(gè)div的高度，就會(huì)撐開wai這個(gè)div，而在另一個(gè)方面，我們要注意到的是，當(dāng)我們給wai這個(gè)div加上一個(gè)高度值，那么無(wú)論nei這個(gè)div的高度是多少，wai這個(gè)高度都是我們?cè)O(shè)定的值。而當(dāng)nei的高度超過(guò)wai的高度的時(shí)候，超出的部分就會(huì)被隱藏。這就是隱藏溢出的含義！
我相信，通過(guò)我的這些文字，大家對(duì)overflow:hidden這個(gè)屬性有了全新的認(rèn)識(shí)。希望大家和我一樣，在div+css學(xué)習(xí)中能夠不斷的進(jìn)步！
關(guān)鍵詞標(biāo)簽：屬性,闡述,全面,這個(gè),
相關(guān)閱讀
熱門文章
DIV+CSS網(wǎng)頁(yè)布局常用的一些基礎(chǔ)知識(shí)整理
人氣排行 DIV CSS完美兼容IE6/IE7/FF的通用方法CSS實(shí)例：list-style-type在IE與FF中奇怪的現(xiàn)象解析-CSS布局實(shí)例CSS實(shí)例:通過(guò)定義漸變邊框給圖片加陰影CSS常用技巧之一 禁止文字自動(dòng)換行網(wǎng)頁(yè)頁(yè)面設(shè)計(jì)中CSS十大注意解決用CSS控制DIV居中失效的問(wèn)題css div設(shè)置float后高度不能自動(dòng)增加讓CSS兼容IE和Firefox的技巧集合