浮動元素的CSS背景色

Question

比方說，我們有一個非常簡單的場景

<div class="content"> 
    <div class="left"> 
     <p>some content</p> 
    </div> 
    <div class="right"> 
     <p>some content</p> 
    </div> 
</div> 

<div class="content"> 
    <div class="left"> 
     <p>some content</p> 
    </div> 
    <div class="right"> 
     <p>some content</p> 
    </div> 
</div> 

這是造型：

.content { 
    width: 960px; 
    height: auto; 
    margin: 0 auto; 
    background: red; 
    clear: both; 
} 

.left { 
    float: left; 
    height: 300px; 
    background: green; 
} 

.right { 
    float: right; 
    background: yellow; 
} 

而且事情是什麼？當我將內容添加到它應該拉下父母的div，我們需要看到紅色的背景......事情是，我看不到紅色背景填滿所有的高度。

任何想法???

非常感謝。

編輯：here is a fiddle to test

Answer 1

當子元素浮動時，它們被從文檔流中取出。在這樣做時，父母不再有定義的維度，因爲孩子在技術上並不佔用空間。因此，父元素自身崩潰。同樣的事情發生在絕對定位兒童元素時。

在這種情況下，我們可以通過將overflow:hidden添加到父元素來修復它，從而強制它包含子元素。或者overflow:auto也適用。有些人可能會建議它比overflow:hidden更好，因爲您將能夠判斷是否有計算結果。

jsFiddle example

.content { 
    overflow:hidden; 
} 

現在父元素不再崩潰，紅色的背景是可見的。

如果您在舊版瀏覽器中尋求支持，也可以使用clearfix，但我不建議這樣做。

Answer 2

怎麼樣在所有div的margin和padding設置爲0？

Answer 3

嘗試關閉類名的所有括號內的HTML佈局，並添加CSS屬性 float:left到。內容類的CSS樣式 http://jsfiddle.net/u3W79/

Answer 4

我在內容容器的結尾使用空明確的div

添加CSS：

.clear { 
    clear: both; 
} 

HTML：

<div class="content"> 
    <div class="left"> 
     <p>some content</p> 
    </div> 
    <div class="right"> 
     <p>some content</p> 
    </div> 
    <div class="clear"></div> 
</div>