清除浮动
1、额外标签法(隔墙法)
<div style="clear: both"></div>
2、父级 overflow: hidden
<div style="overflow: hidden"></div>
3、父级 after 伪元素
.clearfix::after {
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6、7 专有 */
*zoom: 1;
}
4、父级双伪元素
.clearfix::before, .clearfix::after {
content: '';
display: table;
}
.clearfix::after {
clear: both;
}
.clearfix {
*zoom: 1;
}
清除浮动的方式 | 优点 | 缺点 |
---|---|---|
额外标签法(隔墙法) | 通俗易懂、书写方便 | 添加许多无意义的标签,结构化较差 |
父级 overflow: hidden | 书写简单 | 溢出隐藏 |
父级 after 伪元素 | 结构语义化正确 | IE6、7不支持:after,兼容性问题 |
父级双伪元素 | 结构语义化正确 | IE6、7不支持:after,兼容性问题 |