解决子容器全部浮动时父容器高度不能自动撑开的方法

当在一个父容器中包含多个子元素时，这些子元素被设置了浮动属性后，会脱离文档流，导致父容器高度不能自适应其内容高度的变化。解决这个问题的方法有以下两种：

1. 使用Clearfix

Clearfix是一种CSS技巧，它可以在浮动元素的父元素上使用来清除浮动对父容器高度的影响。在父容器上添加一个clear样式可以让其自动撑开。

示例代码：

.parent-container::after {
  content: "";
  display: table;
  clear: both;
}

示例解释：在父容器的伪元素::after中添加了一个空内容，并将其设置为块级元素，并使用clear:both清除浮动对父容器高度的影响。

2. 使用Flex布局

使用Flex布局也可以解决这个问题。Flex布局允许子元素按照一定的规则进行分配和对齐，而且不会对父容器的高度产生影响。

示例代码：

<div class="parent-container">
  <div class="child-element"></div>
  <div class="child-element"></div>
  <div class="child-element"></div>
</div>

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

.child-element {
  width: 100px;
  height: 100px;
  margin: 10px;
  float: left;
}

示例解释：在父容器上设置display:flex;和flex-wrap: wrap;实现自动换行，并将子元素的浮动属性删除，使用margin设置间距。这样父容器就可以根据子元素自动撑开。