清除浮动：方法与原理

您可能听说过“清除浮动”，但您真的理解它吗？整个问题在于，浮动对象无法正确地添加到其所在对象的高度。如下所示，这些具有“floated_box”类的 div 位于“main_container” div 内，但在页面上它们却在该容器 div 之外。

#main_container {
 width: 400px;
 margin: 20px auto;
 border: 2px solid #cccccc;
 padding: 5px;
}

.floated_box {
 float: left;
 width: 100px;
 height: 100px;
 border: 1px solid #990000;
 margin: 10px;
}

<div id="main_container">
 <p>Some content.</p>
 <div class="floated_box"></div>
 <div class="floated_box"></div>
 <div class="floated_box"></div>
 <div class="floated_box"></div>
 <div class="floated_box"></div>
</div>

我们只需要**清除浮动**，这个问题就解决了。将这个空 div 放到最后一个浮动对象**之后**

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

然后您将得到以下结果

此修复确实添加了一些无用的标记，这与 CSS 的道义背道而驰，但它是一个简单的跨浏览器修复，不会让您失望。