如何用CSS/HTML实现Div水平排列且父容器不呈inline状态

当使用float: left让内部.crystal-container水平排列时，父容器.rack-container会出现高度塌陷，导致后续文本跑到父容器旁，看起来像父容器变成了inline状态。以下是两种可行的解决方法：

方法1：清除浮动修复高度塌陷 #

通过给父容器添加清除浮动的伪元素，让父容器重新获得高度，恢复块级元素的特性：

<div class="rack-container">
  <div class="crystal-container">水晶1</div>
  <div class="crystal-container">水晶2</div>
  <div class="crystal-container">水晶3</div>
</div>
<p>这段文本会显示在crystal rack下方</p>

.crystal-container {
  float: left;
  width: 80px;
  height: 80px;
  border: 1px solid #ddd;
  margin-right: 8px;
}

/* 清除浮动的 clearfix 方案 */
.rack-container::after {
  content: "";
  display: table;
  clear: both;
}

方法2：使用Flexbox布局（推荐） #

用现代Flex布局替代float，无需处理浮动塌陷，直接实现子元素水平排列，父容器默认保持块级：

<div class="rack-container">
  <div class="crystal-container">水晶1</div>
  <div class="crystal-container">水晶2</div>
  <div class="crystal-container">水晶3</div>
</div>
<p>这段文本会显示在crystal rack下方</p>

.rack-container {
  display: flex;
  gap: 8px; /* 控制子元素间距，替代margin */
}

.crystal-container {
  width: 80px;
  height: 80px;
  border: 1px solid #ddd;
}

两种方法都能让.rack-container保持块级状态，后续文本自然排列在其下方，其中Flexbox方案更简洁易维护，是当前推荐的布局方式。

内容的提问来源于stack exchange，提问作者halsemarathmellsphv