css中清浮动的方法

CSS中清浮动是当在一个元素中有浮动元素时，如果后面的元素没有设置清除浮动，会出现布局混乱的情况。为了避免这种情况的发生，可以使用如下方法清除浮动。

.clearfix::before,.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}

css中清浮动的方法

上述代码使用了伪元素::before和::after，其中::before生成了一个空元素，并将其设置为表格元素，使其能适应任何高度。::after也是一个空元素，并清除了前面浮动元素的影响。.clearfix元素使用zoom:1，以兼容IE浏览器。

使用该方法，只需要在存放浮动元素的元素上添加.clearfix类即可。

<div class="clearfix">
  <div class="float-left"></div>
  <div class="float-left"></div>
  <div class="float-left"></div>
</div>

总之，清浮动是一个很重要的知识点，掌握了方法，能够避免许多布局上的问题。

相关文章