清除浮动（clearfix）的常见方法

背景

当一个父元素包含的子元素都设置为float的时候，父元素的高度会出现坍塌的现象（见下图）。此时可能会对周围的布局产生影响，所以清除浮动，显得十分重要。

主要的方法

一、使用clear属性

1.添加伪元素

通过在父元素后面添加一个伪元素，设置为 block并清除左右浮动解决问题。目前这个方法是最新的。

.container::after {
    content:" ";
    display:block;
    clear:both;
}

可能有些代码有添加::before,且display：table

.container::after,.container::before{
    content:" ";
    display:table;
}   
.container::after{
    clear:both;
}

实际上添加的部分跟浮动并没有关系，他们的作用是防止子元素的margin-top发生重叠。
但添加::before就必须将display设置为table。主要原理：display设置为table时会出现一个匿名表格单元格（anonymous table-cell），从而创建一个新的BFC（下文会提及），根据BFC的布局规则，会使margin-top不重叠。这里只是解释说明有些代码出现这种写法的原因，如果没有防止重叠的需求，完全可以精简代码，使用上一种写法。

有时还会在代码的最后写上

.container {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

这里主要是为了兼容IE6/7.

还有一种相似的做法

 .clearfix:after{
    display: block;
    clear: both;
    content: "";
    visibility: hidden;
    height: 0;
}
.clearfix{
    zoom:1;
}

将display设置为block是因为:after是伪元素，要想获得clear属性必须将他转换为block。添加visibility: hidden;height: 0;是让包含块末端看起来不那么乱，所以就直接隐藏起来。

2、添加标签

最简单除粗暴的方法就是直接在包含块末端添加一个标签，并且使用clear属性。

<br style="clear:both" /> <!-- So dirty! -->

但这种做法在HTML中语义不明确，一旦代码量增加，后期比较难维护。慎用！

二、触发浮动元素父元素的BFC（什么是BFC？之前写的另一篇文章视觉格式化模型之BFC）

1、使用overflow属性

.container {
    overflow: hidden; /* Clearfix! */
    zoom: 1;  /* Triggering "hasLayout" in IE */
    display: block; /* Element must be a block to wrap around contents. Unnecessary if only using block-level elements. */
}

这里主要是将overflow设置为非visible值，建立一个BFC，根据BFC的布局规则将浮动子元素包含进来。需要注意的是，container 里面的内容是否有溢出的风险。

2、使用float属性

直接将包含块设置为float。即可建立BFC。但这种做法不推荐，因为整体浮动会影响其他的布局。

总结

如上所述，清除浮动有两大方法，使用clear属性和建立BFC。围绕这两方面可以使用很多小技巧。这里只是罗列几个常见的方法，并详细解释每条语句的作用，虽然有点啰嗦，但重在理解。如果有更好的方法也欢迎补充。