css float父元素自適應高度無效解決辦法

當幾個並列div元素使用float屬性時，由於父容器沒有定義實際高度(height)，在IE中顯示出現問題，無法顯示父容器的背景顏色或背景圖片

做了如下設定實驗情況：
1、
不正常顯示的設定
子容器：使用float
父容器：不定義height
2、
在測試中發現，父容器在不定義高度時，取消float屬性，背景顏色顯示正常

子容器：不使用float
父容器：不定義height
3、
而給父容器定義了高度後，子容器再使用float則一切正常

子容器：使用float
父容器：定義height

原因及解決方案

如果您沒有閉合(清除)浮動元素，它將造成的後果是-----div的高度不能自動增加。
外圍元素之所以不能很好的延伸，問題出在了overflow上，因為overflow不可見。見W3C的解釋

解決方案：

給父元素設定高度
讓父元素也浮動

在子級DIV後面加上<div style="clear:both;"></div>，即清除浮動。可以用，但增加了多餘的垃圾代碼。

代碼如下	複製代碼
<div style="background:#666;"> <!– float container –>                <div style="float:left; width:30%; height:40px;background:#EEE; ">Some Content</div>                <div style="clear:both"></div>        </div>

注意，多了一段清理浮動的代碼。這是一種好的CSS代碼習慣，但是這種方法增加了無用的元素。

4.設定父元素overflow為hidden或者auto（視情況選擇使用），這種做法就是將父容器的overflow設為hidden或auot就可以在標準相容瀏覽器中閉合浮動元素，不過使用overflow的時候，可能會對頁面表現帶來影響，而且這種影響是不確定的.

代碼如下	複製代碼
<divstyle="overflow:hidden;">     <divstyle="float:left;">test</div> </div>

下面來看個例子

我們寫一個執行個體，讓我們更直觀地看這個問題是怎麼產生的，首先寫下以下HTML代碼：
  

代碼如下	複製代碼
<div id="top">     　　<div id="left"></div>     　　<div id="right"></div>     </div>          CSS代碼如下：     #top{     　　background: blue;      　　width: 800px;      }     #left{     　　float: left;      　　width: 400px;      　　height: 50px;      　　background: red;      }     #right{     　　float: right;      　　width: 400px;      　　height: 60px;      }

    可以看到，這裡有一個寬度為800像素，背景色為藍色的頂級元素，它有兩個子項目，分別漂浮在左右兩邊，子項目的高左邊的為50像素，右邊的為60像素，為了方便查看，這裡把左邊的子項目背景色設定為紅色。
    使用Firefox或其他現代瀏覽器開啟這個網頁，效果如圖：

    只有左浮的子項目可見，父元素不見了，因為它的子項目都浮動的，不會對父元素產生任何影響，而它內部除了兩個浮動的子項目以外什麼都沒有，因此高度預設為0。現在嘗試使用IE8以下版本開啟這個網頁（IE8已經修正這個問題），效果如圖：

    父元素被子項目撐大了，高度為60px。當初困擾我非常久的，就是我想要IE中的那個效果，可是W3C為float的定義讓父元素大小不會受到任何影響，那怎麼辦？其中一個解決方案就是父元素使用固定的高度，如果子項目的大小不確定，怎麼辦呢？當初做這個的時候上網查了一下資料，在父元素的CSS中加入兩句代碼：
    
    zoom: 1; 
    overflow:hidden; 
    
    那麼Firefox中就可以根據子項目的大小自動適應了。