css中清除浮动的方法总结

1.清除浮动的原理

清除浮动主要是为了解决父级元素因为子级浮动引起内部高度为 0 的问题。清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会到影响下面的标准流。

2.清除浮动的方法一：添加标签法

通过在浮动元素后面添加一个空的标签并且为其添加 clear:both 属性，例如：

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

该方法的缺点是添加了一个多余的标签，使结构冗余。

3.清除浮动的方法二：父元素添加overflow

给造成高度塌陷的父元素添加overflow属性（auto | hidden | scroll）皆可，例如：

<div style="overflow: hidden">
	<div></div>
	<div class="son"></div>
</div>

该方法的缺点是内容过多的时候，内容会被错误的隐藏。

4.清除浮动的方法三：after伪元素法（推荐使用）

该方法时当前普遍使用清除浮动的方法，被大众所使用，具体方法如下：

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

该方法的结构语义化正确，也不需要增加额外的标签，唯一的缺点是低版本浏览器（IE6、7）不兼容。

5.清除浮动的方法四：双伪元素法

在产生高度塌陷的元素添加伪元素清除浮动，具体使用：

.clearfix:before,.clearfix:after { 
  content:"";
  display:table; 
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

该方法低版本浏览器（IE6、7）也不兼容。