1. 额外标签法:在浮动元素末尾添加一个空的标签,例如<div style="clear: both">
优点:通俗易懂,书写方便
缺点: 添加许多无意义的标签,结构化比较差。
2. 父级添加overflow属性方法
原理: 触发BFC,可以实现清除浮动的效果。
优点: 代码简洁
缺点: 内容溢出会被隐藏掉
3. 使用after伪元素清除浮动
.clearfix:after {
content: '.'; //内容为小点,尽量加不要空,否则旧版本的浏览器有空隙
display: block; //转化为块级元素
height: 0;
visibility: hidden; //隐藏盒子
clear: both; //清除浮动
}
.clearfix {
*zoom: 1; //ie6,7的清除浮动方法
}
4. 使用after和before双伪元素清除浮动
.clearfix:after, .clearfix:before {
content: "";
display: table; //触发BFC,防止外边距重合
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1; //ie6,7的清除浮动方法
}
注: 推荐使用方法3,方法4