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

当父元素包含浮动元素时，父元素的高度将变为0，此现象被称为折叠。这通常是一个问题，因为父元素不能包含其它子元素，而调整 overflow 属性或者添加清除浮动 clearfix 类并不能总是解决问题。

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

方法一：使用 display 属性

将父元素的 display 属性设置为 inline-block 或者 table 可以解决折叠问题。这是因为这些属性会创建一个新的 BFC （块级格式化上下文），BFC 对象不会和浮动元素发生重叠，从而避免浮动折叠的问题。

.parent {
  display: inline-block;
}

方法二：使用 clear 属性

可以在浮动元素后添加一个空的 DIV 元素，并设置其 CSS 属性 clear: both;，以清除浮动元素，防止浮动元素对父容器造成影响。

<div class="parent">
  <div class="child"></div>
  <div class="clear"></div>
</div>

.clear {
  clear: both;
}

方法三：使用 float 属性

在父容器上设置 float 属性可以避免浮动折叠的问题。但这种方法可能会使整个布局呈现为浮动，需要考虑是否合适。

.parent {
  float: left;
}

综上所述，使用以上方法可以避免浮动元素的父元素在 CSS 中折叠。