CSS 清除浮动的几种方法

在 CSS 中，浮动元素可能会导致父元素塌陷，为了解决这个问题，可以使用以下几种方法来清除

使用清除浮动的伪元素（clearfix）:

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

在父元素上添加 clearfix 类，这样就可以清除子元素的浮动效果。

<div class="clearfix">
  <div style="float: left;">浮动元素1</div>
  <div style="float: left;">浮动元素2</div>
</div>

使用空标签清除浮动：

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

类似于第一种方法，通过在父元素的尾部插入一个空的块级元素来清除浮动。

使用 overflow 属性：

.clearfix {
  overflow: hidden;
}

设置父元素的 overflow 属性为 hidden，这也能清除浮动效果，但要注意不要使内容溢出。

<div class="clearfix">
  <div style="float: left;">浮动元素1</div>
  <div style="float: left;">浮动元素2</div>
</div>

使用父元素添加浮动：

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

.clearfix::after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}

这是一种兼容老版本 IE 浏览器的方法，通过在父元素上添加浮动和触发 hasLayout（*zoom: 1;）来清除浮动。

<div class="clearfix">
  <div style="float: left;">浮动元素1</div>
  <div style="float: left;">浮动元素2</div>
</div>

这些方法中，使用伪元素清除浮动的方式较为常见，因为它不需要额外的空标签，且兼容性较好。选择清除浮动的方法时，可以根据实际情况和需求选择适合的方式。