清除浮动的三种方法

  在我使用浮动时，为我们带来了便利的同时也带了一点影响，我们在使用浮动时往往不会给父级盒子添加高度，因为子盒子会撑起父盒子。这样一旦我们使用浮动，则下面使用的div会跑到父级盒子的位置，毕竟使用浮动，不占有位置，解决此问题我列出了三种方法，希望能帮助大家。

1、在浮动元素后添加空标签

eg：

<div class="father">
<div class="son1">111</div>
<div class="son2">222</div>
<div style="clear: both"></div>
</div>

父级元素和子元素的css样式就不具体写了，相信大多数人都会。

2、在父级元素上添加样式overflow：hidden（auto|scroll ）

此方法是通过触发BFC的方式，实现的清除浮动的效果。（BFC可自行在百度liao了解）

3、使用伪元素after清除浮动（推荐使用）

eg:

.clearfix:after{              //清除浮动

content：".";

display:block;//转化为块级元素。

visibility:hidden;//隐藏盒子。

height:0;

clear:both;//清除浮动。

}

.clearfix{

*zoom:1;//*IE6,7能识别的特殊符号。zoom是IE6,7 清除浮动的fang方法

}

<div class="father clearfix">
<div class="son1">111</div>
<div class="son2">222</div>
<div style="clear: both"></div>
</div>

以上为个人见解，大家有什么想法，欢迎留言交流。