下面给你一份 最全 + 最实用 + 可直接复制使用 的 HTML5 高度塌陷问题解决方案整理，包括原因解析、4 种经典解决方式、使用场景与推荐方案。适合你整理成教程、博客或项目笔记。

🎯 什么是高度塌陷？

高度塌陷一般出现在 父元素内部的子元素采用浮动（float）布局时：

• 子元素 float left/right 后脱离标准文档流
• 父元素内部没有普通文档流元素
• 父元素高度无法被内容撑开 → 视觉上“塌陷为 0”

出现后常造成问题：

• 父元素背景消失
• 父元素边框消失
• 布局错乱

🎯 常见例子（错误示范）

<style>
  .parent {
    background: #eee;
    border: 2px solid #666;
  }
  .child {
    float: left;
    width: 100px;
    height: 100px;
    background: #f66;
  }
</style>

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

👉 父元素高度 0，背景与边框看不到。
解决方法看下面！

✅ 方法 1：clearfix（清除浮动）【最经典、最常用】

CSS：

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

使用：

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

优点：

• 兼容性极好（IE8+）
• 常用于页面结构布局
• 灵活且不会影响其它行为

推荐指数：⭐⭐⭐⭐⭐（最推荐）

✅ 方法 2：父元素 overflow 属性撑开高度

写法：

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

优点：

• 代码最少
• 简单快速
• 适合无滚动场景

缺点：

• 会隐藏溢出的子元素内容

适用场景：

• 不需要显示溢出内容
• 简单卡片、布局小模块

推荐指数：⭐⭐⭐⭐

✅ 方法 3：父元素使用浮动（float）

让父元素也 float，它自然会被内部子元素撑起来。

.parent {
  float: left;
}

缺点：

• 会影响布局
• 父元素自己需要被清除浮动
  → 不推荐做通用方案

推荐指数：⭐⭐

✅ 方法 4：父元素添加 display: flow-root（现代浏览器最优雅）

CSS 新规范中的解决方案：

.parent {
  display: flow-root;
}

效果：

• 自动形成新的 BFC（块级格式化上下文）
• 直接解决浮动塌陷问题

优点：

• 最简洁、语义好
• 现代浏览器兼容优秀（IE 不支持）

适用场景：

• 不需要兼容 IE 的项目
• 移动端 H5 项目 → 强烈推荐

推荐指数：⭐⭐⭐⭐⭐（移动端最佳）

🔥 方法 5：创建 BFC（触发块级格式化上下文）

触发 BFC 的元素可以自动包含浮动元素。

触发 BFC 的方式包括：

/* 任意以下之一即可 */
.parent { overflow: hidden; }
.parent { overflow: auto; }
.parent { display: inline-block; }
.parent { float: left; }
.parent { position: absolute; }
.parent { position: fixed; }
.parent { display: flow-root; }

其中最干净的方式就是 flow-root。

📌 四种方法对比总结

🧩 推荐方案（按场景）

✔ PC 页面 + 兼容 IE

👉 使用 clearfix

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

✔ 移动端 H5、WebApp、小程序

👉 使用 display: flow-root

.parent { display: flow-root; }

✔ 简单卡片（无溢出内容）

👉 使用 overflow

.parent { overflow: hidden; }