1. 标签法
即在子元素中加入一个标签，用于清除浮动
<div class="clearfix"></div>
.clearfix {
clear: both
}
2. overflow法
给父元素设置overflow属性
.box {
width: 700px;
overflow: hidden;
}
3. 伪元素法
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
百度就是使用的这种方法：
image.png
4. 双伪元素法
.clearfix:after, .clearfix:before {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
总结
| 清除浮动方法 | 优点 | 缺点 |
|---|---|---|
| 标签法 | 通俗易懂，写起来简单 | 添加了额外的标签，破坏了原有的结构，结构化变差了 |
| overflow法 | 写起来简单 | hidden会把内容截断 |
| 伪元素法 | 结构语义正确 | 有兼容问题:IE6,7不支持:after |
| 双伪元素法 | 结构语义正确 | 有兼容问题:IE6,7不支持:after |
网友评论