display: flow-root 是解决浮动塌陷最直接有效的方案，它通过触发bfc使父容器包含浮动子元素，现代浏览器全支持且无副作用；clear: both 无效因仅作用于自身而非父容器高度计算。
display: flow-root 是当前最直接有效的解法，现代浏览器全支持，一行代码就能让父容器重新包含浮动子元素，不裁剪、不干扰布局。
为什么 clear: both 加在父元素上完全无效
因为 clear 只控制「自身」避开前面的浮动兄弟，不是让父容器去“感知”子元素。给 .parent { clear: both; } 写上去，它只会在前面有浮动兄弟时换行，对内部浮动子项的高度计算毫无影响——父容器依然看不见它们，高度照样是 0。
真正起效的 clear: both 必须出现在浮动子元素之后、且与之同级的块级元素上（比如一个空 <div>），但这种写法要改 HTML 结构，调试困难，也不适合封装组件。
<h3>用 <code>display: flow-root 触发 BFC 的关键约束
这个值专为解决浮动塌陷而设计，语义明确、副作用为零，但必须满足几个硬性条件：
- 必须作用于直接包裹浮动子元素的那个父容器，写在祖父层或子元素上都无效
- 父容器本身不能是
inline元素（如<span></span>），否则需先设display: block或display: inline-block - 如果父容器已经是
display: flex或display: grid，再加flow-root不仅无用，还会干扰调试——因为 float 在这类容器中本就失效 - 它只对含
float子项的容器生效；若子元素靠position: absolute脱离文档流，flow-root也救不了
兼容性兜底和伪元素清除的实操要点
2026 年绝大多数生产环境可直接用 display: flow-root，Chrome 64+ / Firefox 58+ / Safari 15.4+ / iOS 15.4+ 全支持。如需兼容 IE11 或旧内核，可用 @supports 回退：
.container { display: flow-root; }
@supports not (display: flow-root) {
.container { overflow: hidden; }
}
若必须用 .clearfix::after，三要素缺一不可：
-
content: ""—— 不写则伪元素不生成，DevTools 默认不显示，需手动开启 “Show user agent shadow DOM” 才能看到 -
display: table—— 比block更稳妥，避免旧版 IE margin 双倍问题，且天然触发 BFC 边界 -
clear: both—— 核心动作，仅靠前两项不能撑开高度
嵌套浮动结构中，每一级「直接包裹浮动子项」的容器都得单独加 flow-root 或 clearfix；外层加了不代表内层自动生效。
最容易被忽略的一点：问题根源往往不在“怎么清”，而在“为什么还在用 float 做布局”——如果只是为了让子元素横排，flex 或 grid 才是现代解法，高度计算天然可靠，根本不会塌陷。
