解決父容器高度不能自動撐開的方法

剛?cè)腴T網(wǎng)站設(shè)計布局的開發(fā)者肯定會碰到這樣的問題，那就是當(dāng)子容器全部浮動的時候，父容器的高度不能自動撐開。在我們沒有為富容器設(shè)置邊框或背景的時候是看不到這個問題的，如下的代碼。

<div style="background: #F99; width: 400px; border: 1px solid #3CF;"> <div style="float: left; background: #36F; width: 180px; height: 180px;">I'm a son container .</div> <div style="float: left; background: #F60; width: 180px; height: 180px;">I'm the other son container .</div> </div>

運行后，大多數(shù)的人會覺得很明顯，這就是一個父容器包裹著兩個子容器，但其實沒有那么簡單，父容器的高度會顯示為0，你能看到的只是父容器的邊框，而高度并沒有被內(nèi)部的兩個子容器的高度撐開。這個時候如果我們?yōu)楦溉萜髟O(shè)置背景將不會被顯示。
解決的方法其實比較簡單，那就是給父容器增加一個屬性，overflow:hidden。
另外一個有效的方法就是在所有的子元素閉合標(biāo)簽后增加一個

<div style="clear:both;"></div>

來清除浮動。這也是一個比較好的做法，通常用在父容器需要設(shè)置固定高度的時候，但是又怕內(nèi)容太多由于設(shè)置了overflow而不能顯示。這兩種方法都是有效的，大家可以在實踐中測試。

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈