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

剛入門網站設計布局的開發者肯定會碰到這樣的問題，那就是當子容器全部浮動的時候，父容器的高度不能自動撐開。在我們沒有為富容器設置邊框或背景的時候是看不到這個問題的，如下的代碼。

<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>

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

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

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

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈