如何填充對齊塊的背景？

Question

我有以下代碼：

<div style="background-color:Aqua"> 
    <div style="float:left">left</div> 
    <div style="float:right">right</div> 
</div> 

我想顯示...

left                  right 

...有一個水上背景，但塊不帶顏色填充。

我在做什麼錯？

Answer 1

清除你的花車，例如與overflow: hidden

<div style="background-color:Aqua; overflow: hidden"> 
    <div style="float:left">left</div> 
    <div style="float:right">right</div> 
</div> 

Answer 2

浮點 - 定位規則依賴的東西，所以你永遠不會沒有的東西對齊對象。 所以，你應該使用以下順序：

<div style="background-color:Aqua"> 
    <div style="float:right;max-width:50%;">Right</div><!-- 100% by default --> 
    <div>Left</div> 
    <div style="clear:right;"></div><!-- closing the floating --> 
</div> 

否則：

<div style="background-color:Aqua"> 
    <div style="float:left;max-width:50%;">Left</div> 
    <div>Right</div> 
    <div style="clear:left;"></div> 
</div> 

或兩個：

<div style="background-color:Aqua"> 
    <div style="float:left;max-width:30%;">Left</div> 
    <div style="float:right;max-width:30%;">Right</div> 
    <div>Center</div> 
    <div style="clear:both;"></div> 
</div> 

Answer 3

我可能會建議使用一個強大的clearfix，尤其是這一個：http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/

添加CSS：

.clearfix:before, 
.clearfix:after { 
    content: ".";  
    display: block;  
    height: 0;  
    overflow: hidden; 
} 
.clearfix:after {clear: both;} 
.clearfix {zoom: 1;} /* IE < 8 */ 

，然後給包含您，父母水上DIV一個class="clearfix"

這裏有一個fiddle demonstration。