学步园

在很长一段时间里面，如果一个容器内有浮动元素的话，我习惯在父容器闭合前加一个 clear:both 元素，用于清除浮动，使父容器撑起。如下面得例子：

<style media="all">
.children {float:left;}
.fixed {clear:both;}
</style>
<div class="parent">
    <div class="children">子元素</div>
    <div class="children">子元素</div>
    <div class="children">子元素</div>
    <div class="fixed"></div>
</div>

但是添加一个并没有实质内容的标签并不符合简化页面结构的目的，而且在 JavaScript 操作子元素时很容易引起 bug。

如果要在不增加 fixed 元素的情况下清除 parent 容器内的浮动，我们可以利用 :after 伪类。 :after 伪类在 W3C 里的定义是：在 :after 元素的内容末尾插入 content 的内容，这些内容默认为 inline 级。

在使用 :after 伪类后，完整的清浮动 CSS 为：

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
}
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

使用上面的样式后，只需为 parent 元素增加一个 clearfix 的class，即可去掉里面的 fixed 子容器。并且兼容目前几乎所有的 web 浏览器。

Source：http://www.codecto.com/2011/02/css-clearfix-float/