清除浮动怎么添加清除浮动的类

清除浮动的类通常是用来修复因为浮动元素导致的布局问题，比如元素不再堆叠在同一行。在CSS中，最常见的一种方法是使用`:before`和`:after`伪元素配合`clear`属性。例如，你可以创建一个名为`.clearfix`的类：

.clearfix {
  *zoom: 1; /* IE6/7 hack to trigger hasLayout */
  zoom: 1; /* Standard way of triggering hasLayout for modern browsers */

  /* Add clearfix behavior by clearing floats after the floated elements */
  &::before,
  &::after {
    content: "";
    display: table;
  }

  &::after {
    clear: both;
  }
}

/* If you have inline content inside your container with floating children, add this rule */
.clearfix > * {
  float: none;
}

在这个`.clearfix`类中，我们使用了`:before`和`:after`伪元素来创造一个虚拟的换行符，然后通过`clear: both`来防止后续元素继续跟随浮动元素。对于现代浏览器，使用`zoom: 1`可以触发BFC（块级格式化上下文），也可以帮助清除浮动。

当你需要给某个元素应用清除浮动的行为时，只需要给它添加`class="clearfix"`即可。