在 CSS 布局中，高度塌陷是高频且易踩坑的问题，核心定义：父元素未设置固定高度，子元素设置浮动（float）、绝对定位（absolute）等脱离文档流的属性后，父元素无法被子元素“撑开”，导致父元素高度为 0，进而破坏页面整体布局。
先明确核心成因：父元素高度由子元素内容自动撑开（默认 height: auto），当子元素脱离文档流后，父元素无法感知子元素的高度，从而出现高度塌陷。下面先看最典型的高度塌陷场景，再逐一讲解解决办法。
一、典型高度塌陷场景（必懂，快速识别问题）
最常见的场景：父元素包含浮动子元素，未做任何处理，父元素高度塌陷，影响后续元素布局。
/* 父元素 */
.parent {
width: 800px;
background: #f5f5f5; /* 背景色仅用于直观看到父元素范围 */
border: 1px solid #ccc;
}
/* 子元素 - 浮动（脱离文档流） */
.child {
float: left;
width: 200px;
height: 200px;
background: #00aaff;
margin: 10px;
}
问题现象：父元素仅显示边框（高度为 0），子元素浮动在父元素外部，后续元素会被浮动子元素覆盖，布局错乱。
二、4种实用解决办法（按常用度排序，直接套用）
办法1：给父元素设置 overflow: hidden（最简单，推荐入门使用）
核心原理：给父元素设置 overflow: hidden，会触发“BFC（块级格式化上下文）”，BFC 会让父元素能够感知到脱离文档流的子元素高度，从而自动撑开父元素。
.parent {
width: 800px;
background: #f5f5f5;
border: 1px solid #ccc;
overflow: hidden; /* 关键：触发BFC，解决高度塌陷 */
}
.child {
float: left;
width: 200px;
height: 200px;
background: #00aaff;
margin: 10px;
}
优点：代码简洁，无需额外标签，上手最快；
缺点：若父元素内部有超出范围的内容（如下拉菜单），会被隐藏（overflow: hidden 会裁剪超出部分），适合无溢出内容的场景。
办法2：父元素末尾添加“清除浮动”元素（最稳妥，无副作用）
核心原理：在父元素内部所有子元素之后，添加一个空元素，给该元素设置 clear: both，清除浮动对父元素的影响，让父元素能够感知子元素高度。
<!-- HTML 结构：父元素末尾添加空div -->
<!-- 清除浮动的空元素 -->
.parent {
width: 800px;
background: #f5f5f5;
border: 1px solid #ccc;
}
.child {
float: left;
width: 200px;
height: 200px;
background: #00aaff;
margin: 10px;
}
.clear {
clear: both; /* 关键：清除左右两侧的浮动 */
height: 0; /* 可选：避免空元素占据额外高度 */
overflow: hidden; /* 可选：兼容低版本浏览器 */
}
优点：无副作用，兼容所有浏览器，适合任何场景（包括父元素有溢出内容的情况）；
缺点：需要额外添加一个空元素，略微增加 HTML 结构冗余。
办法3：使用伪元素清除浮动（推荐，无结构冗余）
核心原理：利用 CSS 伪元素 ::after，在父元素内部末尾“虚拟”添加一个元素，再给伪元素设置 clear: both，本质和“办法2”一致，但无需额外添加 HTML 元素，更简洁。
.parent {
width: 800px;
background: #f5f5f5;
border: 1px solid #ccc;
}
/* 关键：给父元素添加伪元素，清除浮动 */
.parent::after {
content: ""; /* 伪元素必须有content，空值也可 */
display: block; /* 必须设为块级元素，否则clear无效 */
clear: both;
height: 0;
overflow: hidden;
}
.child {
float: left;
width: 200px;
height: 200px;
background: #00aaff;
margin: 10px;
}
优点：无额外 HTML 元素，代码简洁，兼容所有现代浏览器，是目前最常用的解决办法；
缺点：写法略复杂，需记住伪元素的固定格式（content、display: block、clear: both）。
办法4：给父元素设置浮动（不推荐，有副作用）
核心原理：给父元素也设置 float（left/right），让父元素也脱离文档流，此时父元素会自动撑开，适应子元素的高度，从而解决高度塌陷。
.parent {
width: 800px;
background: #f5f5f5;
border: 1px solid #ccc;
float: left; /* 关键：给父元素设置浮动 */
}
.child {
float: left;
width: 200px;
height: 200px;
background: #00aaff;
margin: 10px;
}
优点：无需额外代码，快速解决高度塌陷；
缺点：父元素浮动后，会脱离文档流，导致父元素的父元素出现高度塌陷，还会影响后续元素的布局，容易引发连锁问题，仅适合简单布局临时使用。
三、解决办法对比（快速选择，避坑）
| 解决办法 | 优点 | 缺点 | 推荐场景 |
|---|---|---|---|
| overflow: hidden | 代码简洁，上手快 | 会隐藏超出父元素的内容 | 无溢出内容的简单布局（如卡片、列表） |
| 添加空元素 + clear: both | 无副作用，兼容所有浏览器 | 增加 HTML 结构冗余 | 所有场景（尤其是有溢出内容的情况） |
| 伪元素清除浮动 | 无结构冗余，兼容现代浏览器 | 写法略复杂 | 推荐首选，适合大多数实战场景 |
| 父元素设置浮动 | 快速便捷，无需额外代码 | 引发连锁布局问题 | 临时测试、简单布局（不推荐用于正式项目） |
四、补充：高度塌陷的其他场景及注意事项
1. 其他导致高度塌陷的场景
除了浮动子元素，以下情况也会导致父元素高度塌陷，解决思路和上述一致（触发 BFC 或清除影响）：
- 子元素设置 absolute/fixed 定位（脱离文档流），父元素未设置高度；
- 父元素内所有子元素均为 inline/inline-block，且未设置高度，内容为空；
- 父元素设置 height: auto，子元素设置 margin-top/margin-bottom，导致父元素被“顶开”或高度异常。
2. 关键注意事项
- 优先使用“伪元素清除浮动”，兼顾简洁性和无副作用，是企业开发中的主流写法；
- 使用 overflow: hidden 时，务必确认父元素内部无需要显示的溢出内容（如下拉菜单、弹窗）；
- 避免给父元素设置浮动解决塌陷，除非明确后续布局不受影响，否则会引发连锁问题；
- BFC 除了解决高度塌陷，还能解决 margin 重叠问题，核心触发条件：overflow: hidden、float: 非none、position: absolute/fixed、display: flex 等。
五、总结（快速记忆）
高度塌陷核心：父元素无固定高度，子元素脱离文档流 → 父元素无法感知子元素高度；
核心解决思路：让父元素能够感知脱离文档流的子元素（触发 BFC 或清除浮动影响）；
首选方案：伪元素清除浮动（无冗余、无副作用）；
备用方案：overflow: hidden（简单场景）、添加空元素（兼容场景）；
避坑点：不推荐父元素浮动，避免引发连锁布局问题。
