#yyds干货盘点# 清除浮动的方式和原因

你听说过“清除浮动”，但你真的了解吗？整个问题是浮动对象不会正确添加到对象的高度。正如您在下面看到的，这些具有“floated_box”类的 div 位于 div“main_container”内，但在页面上它们位于该容器 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>

我们需要做的就是清除 float，整个问题就消失了。将这个空 div 放在最后一个浮动对象之后：

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

你得到这个：

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