Issue with `float: left;`

Question

请看这张小提琴

本质上，我有两个div，它们有float: left;，被<br/>隔开。问题是div s出现在另一个旁边，而不是显示一个在另一个下面，中间有一个空格。

Answer 1

您需要clear: left，如果您愿意，您可以使用margin-bottom:1em来给出中间的间隙。http://jsfiddle.net/zn5wA/1/

对于float:left, <br>只会出现在浮动元素的旁边。

Answer 2

如果您希望它们显示在彼此的下方，请不要使用float:left;

http://jsfiddle.net/XcV2v/2/

或者，您可以使用clear:both，但是如果您不需要float:left，那么删除这个

Answer 3

你只需要清除它们。

添加clear:both;

.container {
    float: left;
    border: solid 2px blue;
    clear:both;
}

示例:http://jsfiddle.net/XcV2v/1/

Answer 4

你需要先清除第一个浮点数来放置另一个浮点数。

下面的内容可以帮助你:

<div id='div1' style=float:left>
....
</div>
<div style=clear:left></div>
<div id='div2' style=float:left>
...
</div>