如何防止浮动元素的父元素在 CSS 中折叠？

当一个父元素包含浮动元素时，本应该根据子元素自适应宽度的父元素会出现高度为0的情况，这是因为浮动元素从文档流中脱离，不再占用它原来的位置，而父元素默认不会去适应浮动元素的高度。这种现象被称为折叠，下面是避免折叠的方法：

1. 使用清除浮动的技巧

在父元素的末尾添加一个空 div，给该 div 添加一个 clear 属性，使其可以清理浮动，确保父元素高度正确。

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

然后在父元素中添加样式类名为 clearfix 即可：

<div class="clearfix">
  <div class="float-box">浮动元素</div>
  <div class="float-box">浮动元素</div>
  <div class="float-box">浮动元素</div>
</div>

这种方法的缺点是通过添加一个空 div 来实现清理浮动，虽然能达到目的，但是并不符合 HTML 语义化。

2. 使用 overflow 属性

为清除浮动而使用 overflow 属性是比较常见的方法，把容器元素的 overflow 属性设置成 auto 或 hidden，即可使其包含浮动元素。

.parent {
  overflow: hidden;
  /* or overflow: auto; */
}

<div class="parent">
  <div class="float-box">浮动元素</div>
  <div class="float-box">浮动元素</div>
  <div class="float-box">浮动元素</div>
</div>

缺点是如果子元素高度超过父元素，则会被裁剪掉，另外如果希望子元素完全展示而不被裁剪，必须将父元素的高度设定得比子元素的高度要高。

3. 使用 display 属性

将父元素的 display 属性值设为 table 或者 inline-block，可以使其包含浮动元素。

.parent {
  display: table;
  /* or display: inline-block; */
}

<div class="parent">
  <div class="float-box">浮动元素</div>
  <div class="float-box">浮动元素</div>
  <div class="float-box">浮动元素</div>
</div>

缺点是会改变元素的默认布局方式，可能会影响其他样式。

4. 使用 flexbox 布局

使用 flexbox 布局可以让包含浮动元素的父元素自动适应内容高度，而不需要使用其他方法。

.parent {
  display: flex;
  flex-wrap: wrap;
}

<div class="parent">
  <div class="float-box">浮动元素</div>
  <div class="float-box">浮动元素</div>
  <div class="float-box">浮动元素</div>
</div>

缺点是兼容性较差，在一些低级浏览器中可能无法使用。

以上是几种防止浮动元素的父元素在 CSS 中折叠的方法，可以根据实际需求选择不同的方法。