下面的CSS項目浮動：左不工作

Question

使用「float：left;」並排放置div是導致問題的原因。我似乎無法將另一個div直接放在浮動div下面。

見的jsfiddle - >http://jsfiddle.net/8RgkE/

你可以看到綠色的盒子擱底下紅色和藍色的箱子，但我需要的綠框下移下面的兩個箱子。我似乎無法做到這一點，並保持「float：left」框。

這裏的踢球者：的高度的紅色和藍色框可能會有所變動，所以你不能封裝小箱子放進一個div和尺寸股利。

HTML

<div id='red' class='box'></div> 
<div id='blue' class='box'></div> 
<div id='green'></div> 

CSS：

.box { 
    width:200px; 
    height:200px; 
    float:left; 
} 

#red {background-color:red;} 

#blue {background-color:blue;} 

#green{ 
    width:400px; 
    height:400px; 
    background-color:green; 
    border:4px solid black; 
} 

Answer 1

你需要清除浮動。

#green{ 
    clear: both; 
} 

http://jsfiddle.net/8RgkE/2/

Answer 2

你可以使用clear: left;上#green

http://jsfiddle.net/8RgkE/1/

Answer 3

需要清除的div開始新線。

DEMO http://jsfiddle.net/8RgkE/3/

我通常使用一個清算div像這樣

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

另一個解決方案是與display: inline-block

DEMO http://jsfiddle.net/8RgkE/4/

Answer 4

最安全更換最可擴展的方式是在綠色div之前添加一個新元素clear:both;。

HTML

<div id='red' class='box'></div> 
<div id='blue' class='box'></div> 
<div id='clear'></div> 
<div id='green'></div> 

CSS

#clear{ 
    clear:both; 
}