解決子容器全部浮動時父容器高度不能自動撐開的方法
發(fā)布時間：2012-12-27 15:28:46 作者：佚名 
我要評論
我要評論剛?cè)腴T網(wǎng)站設(shè)計布局的開發(fā)者肯定會碰到這樣的問題，那就是當(dāng)子容器全部浮動的時候，父容器的高度不能自動撐開,今天偶也遇此問題，需要了解的朋友可以參考下
剛?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而不能顯示。這兩種方法都是有效的，大家可以在實踐中測試。
復(fù)制代碼
代碼如下:<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)簽后增加一個
復(fù)制代碼
代碼如下:<div style="clear:both;"></div>
來清除浮動。這也是一個比較好的做法，通常用在父容器需要設(shè)置固定高度的時候，但是又怕內(nèi)容太多由于設(shè)置了overflow而不能顯示。這兩種方法都是有效的，大家可以在實踐中測試。
相關(guān)文章
- 當(dāng)一個元素只包含浮動元素的時候，它會出現(xiàn)高度折疊，即元素的上下底邊重合，和高度為0效果一樣，針對這個問題與大家分享四種解決方法，感興趣的你可以參考下本文或許對你2013-03-04
純CSS無hacks的跨游覽器自適應(yīng)高度多列布局 推薦
翻譯自Matthew James Taylor的Equal Height Columns with Cross-Browser CSS and No Hacks，有些部分根據(jù)我的理解改了，讓一些初心者更好理解。2009-11-12- 由于浮動的元素脫離了文檔流，所以它們不會在網(wǎng)頁文檔中占據(jù)空間。如果一個DIV容器中想要包含這些浮動的元素的話，有兩種辦法。2011-08-02
CSS教程：div設(shè)置float后高度不自動增加-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
相關(guān)文章：http://www.webjx.com/css/divcss-4952.html http://www.webjx.com/css/divcss-5991.html 本來想把這個題目修改為“閉合浮動元素”或&l2008-10-17- 在進行浮動布局時，大多數(shù)人都深知，在必要的地方進行浮動清理：。2009-09-03
- 在網(wǎng)頁制作中經(jīng)常會用到浮動。用了浮動就會涉及到一個清除浮動的問題，因為包含浮動的元素是不會自動適應(yīng)高度的，也就是不會被浮動元素?fù)伍_。2010-07-23
- 在ie8、chrome瀏覽器中，包裹浮動的li元素的外層ul高度為0，ie7瀏覽器和ie8兼容模式顯示正常，下面與大家分享下多種解決方法大家可以根據(jù)情況自由選擇，希望對大家有所幫助2013-07-31