清除浮动的几种方式
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.第四张是精简版,虽然简便,但是不推荐使用,因为不严谨。