为什么需要清除浮动?
① 父级没高度。
② 子盒子浮动了。
③ 影响下面布局了,我们就应该清除浮动。
1、在结尾处添加空的块级标签,如div,并添加清除浮动样式
- 优点:通俗易懂,书写方便
- 缺点:添加许多无意义的的标签,结构化较差
.clear{
clear: both;
}
2、给父级元素添加overflow:hidden
- 优点:书写简单
- 缺点:溢出隐藏
.box{
width: 800px;
background-color: pink;
margin: 0 auto;
overflow: hidden;
}
3.给父级元素添加:after伪元素
- 优点:结构语义化正确
- 缺点:由于IE6-7不支持:after,有兼容性问题
.clearfix:after{
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* 兼容IE6、7专用 */
*zoom: 1;
}
4、给父级元素添加双伪元素
- 优点:结构语义化正确
- 缺点:由于IE6-7不支持,有兼容性问题
.clearfix:before,.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear:both;
}
.clearfix {
/* 兼容IE6、7专用 */
*zoom: 1;
}