.clearfix::before, .clearfix::after { content: ""; display: table; } .clearfix::after { clear: both; } .clearfix { zoom: 1; }
上面的代码就是最常见的CSS清除浮动方法,也叫做“清除浮动”技巧。当需要禁止浮动时,只需在需要清除浮动的元素上加上clearfix类即可。
具体来说,大家在HTML中添加以下代码:
<div class="clearfix"> <div class="box"></div> </div>
在CSS中,大家定义clearfix类,通过设置::before和::after伪元素,使其生成的空白占用一行,清除浮动影响,让元素能够按需排列。
除了使用.clearfix类,还可以使用其他类名,只需遵循相同的CSS代码原则即可。例如:
.fix--float::before, .fix--float::after { content: ""; display: table; } .fix--float::after { clear: both; } .fix--float { zoom: 1; }
总之,无论使用何种方法,清除浮动都是CSS布局中的必备技巧。在实际开发中,大家可以根据实际需要,选择最适合的方法,使页面达到预期效果。