display: flow-root 是首选解法，它专为解决浮动塌陷而生，创建bfc包容浮动子元素且不干扰布局；需作用于直接父容器，现代浏览器已全面支持。
display: flow-root 是当前最直接、副作用最小的解法，现代项目中应优先使用它代替 overflow: hidden 或伪元素清除。
为什么 display: flow-root 是首选
它专为解决浮动塌陷而生，语义清晰：创建一个块级格式化上下文（BFC），让父容器重新包含浮动子元素的高度，同时不改变子元素的布局行为。不像 display: flex 或 display: grid，它不会强制重排子项、不干扰 float 原有流向。
- 必须作用于**直接包裹浮动子元素的那个父容器**——写在祖父层或子元素上都无效
- 父容器若原本是
inline元素（如span），需先设display: block或inline-block，否则flow-root不生效 - Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+ 已全面支持，2026 年真实项目可放心落地
overflow: hidden 能用，但真不是“修复”
它确实能触发 BFC，让父容器高度正常计算，但本质是“裁剪”而非“包容”：
- 所有超出边界的子内容（
position: absolute的弹层、box-shadow、transform位移的伪元素）都会被意外裁掉 -
overflow: visible不触发 BFC，写了等于没写 -
overflow: auto在部分旧版 Safari 中会无故显示滚动条，哪怕内容根本没溢出 - 组件封装时，若卡片内部用了
overflow: hidden，外部调用方的日期选择器、tooltip 等浮层类组件可能直接消失，调试时极难定位
伪元素 clearfix 还得会，但别乱套
很多人复制了 .clearfix::after 却没效果，往往因为漏掉关键项。标准写法必须同时满足：
-
content: ""—— 缺失则伪元素不生成，clear: both彻底失效 -
display: table（推荐）或display: block——table更稳妥，避免 IE8 下 margin 合并异常；block在部分场景下无法撑开高度 -
clear: both—— 这才是清除行为的核心，仅靠前两项不能解决问题 -
clear: both加在父容器自身上（如.parent { clear: both; }）完全无效，因为它只影响“同级兄弟元素”的流位置，对内部子项无感
别忽略浮动本身的语义退场现实
浮动本就不是为整体布局设计的，而是为图文环绕这类传统排版需求服务的。2026 年真实项目中，新布局应优先用 flex 或 grid；但维护老代码、处理遗留组件、或需要兼容特定交互（如拖拽中临时 float）时，BFC 解法仍是绕不开的基本功。真正容易被忽略的点是：塌陷常不是单一原因——比如父容器本身是 inline 元素，或子元素还混用了 position: absolute，这些都会让 BFC 触发失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
