什么时候用清除浮动:
父级没高度,子盒子浮动,影响到了下面布局,我们就应该清除浮动了。
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题。清除浮动之后,父级就会根据浮动的子盒子自动检测高度。父级有了高度,就不会影响下面的标准流了。
清除浮动的方法:
①额外标签法(隔墙法)
通过在浮动元素末尾添加一个空的标签:
<div style=”clear:both”></div>
②父级添加overflow属性方法
给父级添加:overflow为 hidden | auto | scroll 都可以实现。
③使用after伪元素清除浮动
.clearfix:after {
content: "";
visibility: hidden;
display: block;
clear: both;
height: 0;
}
.clearfix {
*zoom: 1; /* IE6、7 专有 */
}
④使用双伪元素清除浮动
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1; /* 由于IE6-7不支持:after,使用zoom: 1触发hasLayout */
}