清除浮动的几种方式

1.overflow:hidden;
先找到浮动元素的父元素，给父元素添加overflow:hidden样式
div{
overflow:hidden;
}
缺点：超出父盒子的部分会被隐藏。

2.使用额外标签法清除浮动
.clear{
clear : both;
}
在浮动的盒子下再放一个标签.clear,在这个标签内使用clear:both，来清除浮动对页面的影响。
缺点：不推荐使用这种方式清除浮动，会增加页面的标签，导致结构混乱。

3.使用伪元素清除浮动
**demo:
.clearfix:after{
content:""; //将内容清空
height: 0; //高度设为0
line-height: 0; //行高设为0
display:block; //将文本设为块级元素
visbility:hidden; //将元素隐藏
clear:both; //清除浮动
};
.clearfix{
zoom: //兼容IE
};
**

4.使用双伪元素清除浮动
**demo
.clearfix:before,clearfix:after{
content:"";
display:block;
clear:both;
}
.clearfix{
zoom:1;
}
**
##总结：
a.第一种超出盒子部分会被隐藏
b.第二种会增加多余的标签
c.第三种推荐使用
d.第四张是精简版，虽然简便，但是不推荐使用，因为不严谨。