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

背景

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

主要的方法

1、使用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;是让包含块末端看起来不那么乱，因此就直接隐藏起来。

二、添加标签

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

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

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

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

一、使用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 里面的内容是否有溢出的风险。

二、使用float属性

直接将包含块设置为float。便可创建BFC。但这种作法不推荐，由于总体浮动会影响其余的布局。

总结

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