3.4清除浮动总结
为什么需要清除浮动？
1、父级没有高度
2、子盒子浮动了
3、影响下面布局了
| 清除浮动的方式 | 优点 | 缺点 |
|---|---|---|
| 额外标签法(隔墙法) | 通俗易懂，书写方便 | 添加许多无意义的标签，结构化较差 |
| 父级overflow:hidden; | 书写简单 | 溢出隐藏 |
| 父级after伪元素 | 结构语义化正确 | 由于IE6-7不支持:after，兼容性问题 |
| 父级双伪元素 | 结构语义化正确 | 由于IE6-7不支持:after，兼容性问题 |
- 隔墙法
在最后一个浮动后面添加盒子并添加clear: both; - 父级overflow:hidden;
给浮动元素的父盒子添加overflow:hidden - 父级after伪元素
添加css代码并给父级添加class名clearfix
.clearfix::after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /*IE6,7专用*/
*zoom: 1;
}
- 父级双伪元素
添加css代码并给父级添加class名clearfix
.clearfix::before, .clearfix::after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix { /*IE6,7专用*/
*zoom: 1;
}
