具有浮动属性的 HTML div 标签的布局答案

【问题标题】：Layout of HTML div tags with float property具有浮动属性的 HTML div 标签的布局
【发布时间】：2014-10-14 10:11:25
【问题描述】：

我有一个问题：

为什么下面的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 属性？

附：我正在使用 Mozilla Firefox 作为浏览器。

谢谢

【问题讨论】：

好的，我想我必须在第三个 div 中使用 clear:left 属性？但是为什么我不使用 clear:left 时会有这个奇怪的框？
谢谢 Hashem，你能解释一下为什么我不使用 clear:left 时会有这样的输出吗？
这只是 I've explained it fully here 的 CSS 浮动的预期行为。事实上，线框尊重浮动元素，所以它们会包裹它，盒子本身会忽略浮动元素。

标签： html css css-float stylesheet

【解决方案1】：

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

如果您希望它“在”它们“下方”，那么 clear 浮动。

【讨论】：

【解决方案2】：

逻辑：你必须使用 float: left;也适用于 3 DIV。

【讨论】：

【解决方案3】：

定义

clear:both;

你的第三个 div clear:both;

Demo

Why Clear both

【讨论】：

【解决方案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>

【讨论】：