在CSS中,div标签是制作网页布局的一个重要元素,而浮动也是CSS中使用频率非常高的一种属性。当我们给一个div标签设置了浮动属性后,它会脱离文档流,不再占据原来的位置。然而,在一些情况下,我们需要...
在CSS中,div标签是制作网页布局的一个重要元素,而浮动也是CSS中使用频率非常高的一种属性。当我们给一个div标签设置了浮动属性后,它会脱离文档流,不再占据原来的位置。
然而,在一些情况下,我们需要浮动的
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
上面的代码是一个清除浮动影响的常用方法,我们只需要将需要清除浮动影响的div标签加上class="clearfix"即可。
除了使用clear属性,我们还可以使用伪元素的方法清除浮动影响。在clearfix类中,使用 :before
和 :after
两个伪元素,将它们的content属性设置成一个空格,并且将display属性设置成table,再使用clear属性将 .clearfix:after 清除浮动影响。
最后,给几条clearfix的使用规则: