具有float属性的HTML div标签的布局

Question

我有一个问题：

• 为什么以下HTML代码的输出是这样的？

以下是代码：

<div style="width: 500px; float: left; border-style: solid; padding-left: 10px;">This box occupies 516 pixels on the browser window</div>
<div style="width: 400px; float: left; border-style: solid; padding-left: 10px; margin-left: 50px;">This box occupies 466 pixels of the browser window</div>
<div style="width: 966px; border-style: solid; padding-left: 10px;">This box occupies 982 pixels of the browser window</div>

我期待第三个div应该出现在其他两个浮动div之下，但看起来它包含它们？

我是否以错误的方式使用了float属性？

P.S。我使用Mozilla Firefox作为浏览器。

谢谢

Answer 1

块元素布置在浮动元素的“后面”，只有它们的内联内容浮动在浮动元素周围。

如果你想要它“在”下面，那么clear浮动。

Answer 2

逻辑：你将不得不使用float：left;对于3 DIV也是。

Answer 3

定义

clear:both;

第三个div clear:both;

<强> Demo

<强> Why Clear both

Answer 4

你可以通过清除第二个div之后的float属性来做到这一点，这应该导致第一个和第二个div下的第三个div定位。像这样：

CSS
.clear{
clear: both;
}

<div style="width: 500px; float: left; border-style: solid; padding-left: 10px;">This box occupies 516 pixels on the browser window</div>
<div style="width: 400px; float: left; border-style: solid; padding-left: 10px; margin-left: 50px;">This box occupies 466 pixels of the browser window</div>
<div class="clear"></div>
<div style="width: 966px; border-style: solid; padding-left: 10px;">This box occupies 982 pixels of the browser window</div>