(1)额外标签法
通过在浮动元素末尾添加一个空的标签
例如:
不推荐使用,会增加很多额外的标签
(2)添加overflow属性
给父级就可以清除
overflow: hidden 或者 auto 或者 scroll;
有局限性,盒子里的内容超出部分会隐藏
(3).伪元素
.clearfix:after{
content: “”;
display:block;
height:0;
visibility: hidden;
clear: both;
}
.clearfix {
*zoom : 1; // ie6,7专用
}
然后再给父级的类名后面添加 clearfix
相比前两个好一点
(4)双伪元素
.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix: after {
clear:both;
}
.clearfix {
*zoom: 1;
}
调用与第三个类似
清楚浮动的条件:
1.父级没有高度
2.子盒子添加了浮动
3.影响后面的布局