css清除浮动的四种办法

为什么要清除浮动
在很多情况下，父级盒子不方便给高度，但是子盒子浮动就会脱标而不占有位置，最后父级盒子高度为0，这样就会影响下面的标准流盒子

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

解决方法
1 额外标签法（隔墙法）
在浮动元素末尾添加一个空标签如

2 父级添加overflow属性方法
overflow为hidden或auto或scroll都可以实现

3 使用after伪元素清除浮动
.clearfix:after{ content: “”; display: block; height: 0;clear: both; visibility: hidden; }
.clearfix {zoom: 1;} / 为了适配IE6,7 */

4 使用双伪元素清除浮动
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1;
}

示例
1 现在父盒子没有给默认高度，它现在被俩个标准流的子盒子撑开，高度为200px

2 现在将俩个子盒子同时设置为左浮动，那么俩个子盒子便会脱标，将位置留给标准流的盒子，而此时因为俩个子盒子都已经浮动，那么父盒子的高度变成0px，然后黑色标准流盒子就会上来，这样就影响到了网页的布局
3 给父元素添加双伪元素来清除浮动，这样父级元素就会根据浮动的子盒子自动检测高度，后面的黑盒子就不会上来了