高度塌陷是指父元素未设height且子元素全浮动时高度为0的现象；解决方法首选display: flow-root触发BFC，它语义清晰、无副作用，兼容现代浏览器。
什么是高度塌陷？
父元素没有显式设置 height，且子元素全部浮动（float: left 或 float: right），导致父元素计算出的高度为 0 —— 页面上看起来就像“消失了”，后续元素向上顶替。这是经典浮动塌陷，不是 bug，是 CSS 规范对浮动元素脱离文档流的自然结果。
clear: both 能不能直接用？
能，但要小心位置和语义。在父元素末尾加一个空标签并设置 clear: both 是最直白的解法，但现代项目中不推荐：
- 必须额外加 DOM 节点（比如
），破坏结构语义 - 在 Flex 或 Grid 布局中完全无效
- 若父元素本身有
overflow非visible值，可能意外触发 BFC 从而“恰好”生效，但属于副作用，不可靠
更稳妥的做法是让父元素主动建立 BFC（块级格式化上下文）。
哪些 CSS 属性能触发 BFC？
只要父元素满足以下任一条件，就能包含浮动子元素、避免塌陷：
立即学习“前端免费学习笔记（深入）”；
-
overflow值为hidden、auto或scroll（注意：overflow: visible不行） -
display值为flow-root（推荐！专为此设计，无副作用） -
position值为absolute或fixed（但会脱离文档流，慎用） -
float值非none（父元素自己浮动，通常不适用）
推荐优先写：
section {
display: flow-root;
}它明确表达“我要当容器”，不影响溢出行为、不隐藏内容、不改变定位上下文。
为什么不用 float 父元素或 overflow: hidden？
两者都有效，但各有隐患：
- 给父元素设
float: left：它自己也脱离文档流，可能导致上层布局错乱 - 用
overflow: hidden：如果子元素有下拉菜单、Tooltip 或绝对定位弹层超出父边界，会被裁剪不可见 -
overflow: auto：可能在不需要时出现滚动条（尤其在 Safari 中敏感）
display: flow-root 是目前最干净、意图最清晰的修复方式，兼容性已覆盖 Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+。老版本 IE 不支持，但 IE 早已不处理浮动塌陷问题（它有自己的 layout 模型）。
