Skip to content
高度塌陷
概述
高度塌陷出现在浮动布局中。当一个块级元素的所有子元素都设置了 float，且该父元素没有显式高度时，父元素的高度会计算为零。
这一现象由 CSS 规范对块级格式化上下文中高度计算的规定造成，并非浏览器的实现缺陷。
基本概念
浮动与普通流
浮动元素（float: left / float: right）会脱离普通流（normal flow）。普通流中的块级子元素按顺序参与父元素的高度计算，而脱离流的浮动元素不再占用父容器在普通流中的高度空间。
下面是一个最简示例：所有子元素浮动后，父元素边框向内收缩，高度看起来是零。
html
<style>
.parent { border: 2px solid #333; }
.child { float: left; width: 100px; height: 60px; margin: 4px; background: #eee; }
</style>
<div class="parent">
<div class="child">A</div>
<div class="child">B</div>
</div>此时 .parent 的上下边框会贴合在一起，无法包裹浮动子元素——因为普通流的高度计算完全忽略了这两个浮动子元素。
块级格式化上下文 (BFC)
块级格式化上下文（Block Formatting Context，简称 BFC）是一块独立的布局环境。规范赋予 BFC 两个与高度塌陷直接相关的行为：
- 抑制内部与外部元素之间的垂直外边距折叠。
- 计算自身高度时，将内部的浮动子元素纳入考虑。
创建 BFC 的常见途径及其额外影响：
| 触发方式 | 额外影响 |
|---|---|
overflow: hidden | 裁剪溢出内容 |
overflow: auto | 可能生成滚动条 |
display: flow-root | 无额外影响 |
display: inline-block | 宽度收缩为内容宽度 |
display: flex / grid | 创建的是弹性/网格格式化上下文，不是 BFC |
float 自身 | 父容器仍会塌陷 |
position: absolute | 完全脱离普通流 |
contain: layout | 创建独立格式化上下文，可与 paint/size 组合 |
overflow: hidden 这类方案会将溢出控制、BFC 创建和外边距折叠行为捆绑在一起。display: flow-root 和 contain: layout 则把 BFC 的创建与外边距折叠行为解耦，不引入额外的裁剪或滚动。
工作原理
规范定义
CSS 2.1 §10.6.3 规定：在默认情况下，块级元素的高度由处于普通流中的块级子元素的 margin-box 外边界确定。浮动元素因为脱离了普通流，不被计入高度。
这种设计源于浮动的原始用途——实现图文混排（让文本环绕浮动图片）。父容器在高度计算时不感知浮动子元素，是这一设计意图的直接体现，而非需要修复的“漏洞”。
Blink 布局引擎的执行路径
以 Chromium Blink 为例，在布局阶段，LayoutBlockFlow::ComputeBlockSizeForFragment 负责计算块级元素的高度。其逻辑大致为：
- 遍历子元素的 fragment。
- 判断每个子元素是否位于普通流中。
- 浮动子元素会被标记为 overhanging，不参与父元素 content-box 的高度累加。
- 父元素 content-box 高度仅由普通流块级子元素的高度累加得到。
- 若所有子元素均为浮动，父元素 content-box 高度即为零。
浮动对象在 LayoutBox 树中由独立的 floating_objects_ 集合管理，并不汇入普通流的高度计算链。
当父元素自身触发了 BFC 时，布局引擎会切换计算路径：遍历 floating_objects_，将 overhanging 浮动的 margin-box 下边界纳入父元素的高度计算。display: flow-root 和 overflow: hidden 都是通过这一机制解决高度塌陷的。
基本用法
以下方案按引入的副作用从少到多排列。实际选择时需要权衡语义、兼容性以及方案带来的附加效果。
display: flow-root
css
.parent {
display: flow-root;
}CSS Display Level 3 提供的标准方法，将元素设为 BFC 根。不产生裁剪副作用，除阻止 margin 穿透外不引入其他行为。
html
<style>
.parent { display: flow-root; border: 2px solid #333; }
.child { float: left; width: 100px; height: 60px; margin: 4px; background: #eee; }
</style>
<div class="parent">
<div class="child">A</div>
<div class="child">B</div>
</div>浏览器支持：Chrome 58+、Firefox 53+、Safari 13+。IE 全系列不支持，但 IE 已于 2022 年停止维护，不影响面向现代浏览器的项目。
clearfix
使用伪元素清除浮动，将撑开父容器的工作转移到样式层。
css
.parent::after {
content: '';
display: table;
clear: both;
}下面用带注释的 HTML 说明清除过程：
html
<div class="parent" style="border: 2px solid #333;">
<!-- 两个浮动子元素 -->
<div style="float: left; width: 100px; height: 60px; background: #eee;">A</div>
<div style="float: left; width: 100px; height: 60px; background: #eee;">B</div>
<!-- ::after 伪元素会被插入到这里，其 clear:both 使其下移到所有浮动元素的下边界之下，
进而撑开 .parent 的高度 -->
</div>
<!-- .parent 的边框会包裹住 A 和 B -->伪元素的 display 设为 table 而不设为 block 是有原因的：块级伪元素会参与外边距折叠，若父元素底部的 margin 与伪元素 margin 发生合并，clear 会失效。display: table 会生成块级表格包装盒，内部自动创建匿名的 table-cell 盒——table-cell 自身构成 BFC，clear: both 在这个 BFC 内部将伪元素推到浮动元素下边界，同时该 table-cell 与外部 margin 不发生折叠，从而保证清除行为可靠。
这个方案适用于需要兼容旧浏览器的遗留系统。
overflow: hidden / auto
css
.parent {
overflow: hidden; /* 或 auto */
}通过触发 BFC 让浮动参与高度计算。副作用是超出父容器边界的内容会被裁剪（overflow: hidden）或产生滚动条（overflow: auto）。下拉菜单、tooltip 或绝对定位弹窗等需要溢出的场合不能使用该方案。
html
<style>
.parent { overflow: hidden; border: 2px solid #333; }
.child { float: left; width: 100px; height: 60px; background: #eee; }
</style>
<div class="parent">
<div class="child">A</div>
<div class="child">B</div>
</div>适合确认子元素无溢出需求，或本身就要求内容裁剪的场景（如卡片列表中的固定高度区域）。
contain: layout
css
.parent {
contain: layout;
}CSS Containment Level 1 提供的方案，创建独立格式化上下文，无裁剪副作用，同时明确向浏览器声明元素的内部布局变化不会影响外部，有助于跳过不必要的重排。
html
<style>
.parent { contain: layout; border: 2px solid #333; }
.child { float: left; width: 100px; height: 60px; background: #eee; }
</style>
<div class="parent">
<div class="child">A</div>
<div class="child">B</div>
</div>Chrome 52+、Firefox 69+、Safari 15.4+ 均已支持。在实际开发中 display: flow-root 使用更广泛，部分原因是其浏览器实现历史更长、社区认知度更高。
弹性或网格容器
css
.parent {
display: flex; /* 或 grid */
}弹性容器和网格容器内部，浮动不会脱离流，因此不存在塌陷。这是从布局模型层面消除了问题。需要注意，子元素会变为弹性项或网格项，排列逻辑遵循各自的布局模型，不再按原有文档流排列。
html
<style>
.parent { display: flex; border: 2px solid #333; }
.child { float: left; width: 100px; height: 60px; background: #eee; }
</style>
<div class="parent">
<div class="child">A</div>
<div class="child">B</div>
</div>适用场景：子元素排列本身就是列表或栅格。
显式指定高度
css
.parent {
height: 200px;
}直接绕过高度计算规则。内容变动时需要手动调整高度，不适合内容动态变化的场景。
父元素同时浮动
css
.parent {
float: left;
width: 100%;
}让父元素触发 BFC，但父元素自身也脱离普通流。塌陷问题上移至祖父元素层级。只适用于某些嵌套浮动布局中的临时解决。
方案对比
| 方案 | 解决塌陷 | 溢出处理 | 阻止 margin 折叠 | 改变子元素布局 | 兼容范围 |
|---|---|---|---|---|---|
flow-root | 是 | 无裁剪 | 阻止 | 否 | 现代浏览器 |
clearfix | 是 | 无裁剪 | 阻止（通过 table） | 否 | 全兼容 |
overflow: hidden | 是 | 裁剪内容 | 阻止 | 否 | 全兼容 |
contain: layout | 是 | 无裁剪 | 阻止 | 否 | Chrome 52+ |
flex | 是 | 无裁剪 | 阻止（FFC） | 变为弹性项 | IE11 部分 |
grid | 是 | 无裁剪 | 阻止（GFC） | 变为网格项 | 现代浏览器 |
示例：塌陷与修复对比
以下完整示例在一个页面里并排展示了塌陷前后的效果。
html
<!DOCTYPE html>
<html>
<head>
<style>
.demo { display: inline-block; vertical-align: top; margin-right: 40px; }
.parent { border: 2px solid #333; margin: 10px 0; }
.child { float: left; width: 80px; height: 50px; margin: 4px; background: #ddd; text-align: center; }
/* 塌陷版本——没有额外的清除或 BFC */
.collapsed .parent { /* 默认，不触发 BFC */ }
/* 修复版本——使用 flow-root */
.fixed .parent { display: flow-root; }
</style>
</head>
<body>
<div class="demo collapsed">
<h3>塌陷</h3>
<div class="parent">
<div class="child">A</div>
<div class="child">B</div>
</div>
</div>
<div class="demo fixed">
<h3>修复 (flow-root)</h3>
<div class="parent">
<div class="child">A</div>
<div class="child">B</div>
</div>
</div>
</body>
</html>在浏览器中打开可以看到左侧 .collapsed 的父元素边框紧贴在顶部，而右侧 .fixed 的父元素完整包裹了两个子元素。
注意点
BFC 与外边距折叠
BFC 会阻断内部与外部之间的垂直 margin 折叠。採用 overflow: hidden 或 flow-root 消除塌陷时，元素的外边距行为也发生了变化，需要结合整体布局评估。
position: relative 与浮动
浮动元素可以同时设置 position: relative。此时布局位置仍由浮动规则确定，top / left 偏移只产生视觉位移。父容器计算高度时以原始布局位置为准，不受偏移影响。
BFC 的嵌套与感知范围
html
<div class="outer">
<div class="inner" style="overflow: hidden">
<div style="float: left">Float</div>
</div>
</div>.inner 的 BFC 只能感知其直辖的浮动子元素，并向 .outer 汇报计算后的高度。.outer 自身并未触发 BFC，仍会忽略 .inner 内部的浮动细节，但如果 .inner 的高度已被正确撑开，.outer 不会塌陷。BFC 对浮动的感知向下传递，不会向上影响祖先，除非祖先也触发 BFC。若 .inner 本身也是浮动元素且未显式设置高度，则 .outer 同样需要触发 BFC 才能避免塌陷。
限制
flow-root在 IE 系列中不可用，但 IE 已停止维护。overflow: hidden/auto会裁剪内容，不能用于需要溢出显示的场景。contain: layout兼容性略低于flow-root，部分开发者对其行为不够熟悉。display: flex/grid会改变子元素的布局上下文，无法在所有场景中直接替换。clearfix依赖伪元素，需要处理display: table以避免 margin 折叠，代码略显冗余。- 显式设置高度不具自适应性，内容变更时维护成本高。
应用
浮动的设计初衷是图文混排中的内容环绕。早期清除浮动需要在浮动元素后插入空标签并设置 clear: both，随后的 clearfix 方案将结构干预转移到样式层。overflow: hidden 通过触发 BFC 间接解决塌陷，但裁剪副作用限制了通用性。
display: flow-root 提供了语义明确的 BFC 创建方式，没有额外的副作用。弹性盒与网格布局则从架构层面避免了这一问题。在当代 CSS 里，浮动应回归其设计目标——图文混排中的文本环绕。