解决float元素无法撑起父容器高度的有效方法

3 min read

通常，float 元素会脱离文档流，导致父级容器高度塌陷。为了解决这个问题，您可以尝试以下方法：

  1. 给父级容器设置 overflow:hidden；

  2. 使用伪元素清除浮动，例如：

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

  1. 给父级容器设置一个明确的高度；

  2. 使用 flex 布局将父级容器设置为 flex 容器。例如：

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

这些方法中的任何一个都可以解决 float 元素无法撑起父级容器的高度的问题。可以根据具体情况选择最佳方法。