display: flow-root 是修复父容器高度塌陷最直接有效的方式，它触发 bfc 使父容器自然包裹浮动子元素，无副作用且现代浏览器支持良好。
父容器高度塌陷是因为浮动元素脱离文档流
浮动元素（float: left 或 float: right）会脱离标准文档流，导致父容器无法感知其高度，表现为背景色消失、边框包不住内容、后续元素上移——这不是 bug，是 CSS 规范行为。所谓“还原高度”，本质是让父容器重新包含这些浮动子项。
display: flow-root 是最直接有效的修复方式
一行 CSS 即可触发 BFC（块级格式化上下文），使父容器自然包裹浮动子元素，且无副作用：
.container {
display: flow-root;
}
-
display: flow-root专为此类问题设计，语义清晰，不裁剪box-shadow、不干扰position: absolute子元素定位 - 现代浏览器支持良好：Chrome 58+、Firefox 57+、Safari 10.1+、Edge 79+
- 无需伪元素、无需额外 HTML 结构、不触发 margin 合并
- 如果需兼容 IE11 或旧版 Safari（clearfix 方案
clearfix 仍是最稳妥的兼容方案
当项目必须支持 IE8–11 时，clearfix 仍是首选。关键点在于伪元素必须满足三个条件：
-
::after（不是::before） -
content: ""（缺一不可，否则不生效） -
clear: both+display: table（或block）
完整写法：
.clearfix::after {
content: "";
display: table;
clear: both;
}
.clearfix {
*zoom: 1; /* IE6/7 hack */
}
注意：display: table 比 block 更稳妥，能避免某些老浏览器中因 line-height 或 vertical-align 导致的微小错位。
为什么 overflow: hidden 不推荐作为默认解法
overflow: hidden 虽能触发 BFC 并撑高父容器，但存在隐性风险：
- 意外裁剪
box-shadow、outline、下拉菜单、position: absolute子元素（尤其当它们超出父容器边界时） - 在响应式场景中，配合
transform或scroll-behavior可能引发渲染异常 - 语义不清：本意是“隐藏溢出”，却被用作“修复塌陷”，易误导后续维护者
若已用 overflow: hidden 且页面表现正常，暂可保留；但新项目应优先选用 display: flow-root 或 clearfix。
真正容易被忽略的是：浮动本身已过时。日常布局中，display: flex 和 display: grid 天然不脱离文档流、不塌陷、不需清除——修复只是补救，替换才是根治。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
