为什么两个都不能在css中正确工作？

Question

我的代码是在这里，我设置了div2的clear:both在我的样式表，但DIV3仍然旁边漂浮到它：

#div1 { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: antiquewhite; 
 
    float: left; 
 
    clear: left; 
 
} 
 

 
#div2 { 
 
    width: 20em; 
 
    height: 200px; 
 
    background-color: seagreen; 
 
    float: left; 
 
    clear: both; 
 
} 
 

 
#div3 { 
 
    width: 600px; 
 
    height: 3cm; 
 
    background-color: red; 
 
    float: left; 
 
}

<div id="div1"> 
 
    div1 
 
</div> 
 

 
<div id="div2"> 
 
    div2 
 
</div> 
 

 
<div id="div3"> 
 
    div3 
 
</div>

浮动的效果：

您看到div3在div2旁边，但是m y div2是明确的，为什么得到这个？ 我已经在Firefox和safari测试，没有区别。

Answer 1

clear表示元件不会在之前的浮动元件旁边起泡。

由于DIV2是clear: both，它不动了DIV1旁边。

由于DIV2是float: left，它移动到左侧和DIV3冒泡它旁边。

div3没有clear所以没有什么可以阻止它冒出来。

Answer 2

您也可以将清除添加到div3。