display: flow-root是现代解决浮动塌陷的首选方案，它语义化触发BFC且不裁剪内容；clear: both加在父元素上无效，因它只控制自身避开浮动，不使父容器感知子浮动高度。
直接用 display: flow-root，现代项目里一行就能解决，不用 hack、不裁剪内容、不干扰子元素布局。
为什么 clear: both 加在父元素上完全无效
clear 只控制「自身」避开浮动，不是让父容器去“感知”子项。给 .parent { clear: both; } 写上去，它只会在前面有浮动兄弟时换行，对内部浮动子元素的高度计算毫无影响——父容器还是看不见它们，高度照样是 0。
真正起效的 clear: both 必须出现在浮动子元素之后、且仍在同一父容器内的块级兄弟元素上。伪元素 ::after 就是模拟这个位置，但前提是它得渲染出来：
-
content: ""缺失 → 伪元素不生成 → 清除失效 -
display没设成table或block→ 伪元素是行内级 →clear: both对它无效 - 父容器本身设了
overflow: hidden或auto→ 可能干扰伪元素的清除行为
display: flow-root 是什么，为什么它比 overflow: hidden 更安全
display: flow-root 是 W3C 明确定义的 BFC 触发方式，专为解决这类问题而生。它不靠副作用“碰巧”生效，而是语义化地告诉浏览器：“请把这个容器当作一个独立的格式化上下文来处理”。
立即学习“前端免费学习笔记（深入）”；
对比 overflow: hidden：
-
overflow: hidden会裁剪所有溢出内容：下拉菜单、position: absolute弹层、box-shadow、负margin装饰、transform动画中移出边界的区域，全被切掉 -
display: flow-root不改变子元素排布逻辑，float子项照常浮动，其他子项仍按 normal flow 渲染 - 兼容性已足够好：
Chrome 64+/Firefox 58+/Safari 15.4+/iOS 15.4+，2026 年绝大多数生产环境可直接使用
.clearfix::after 必须写全三要素，漏一不可
仅当需要兼容 IE11 或对接无法修改的第三方 HTML（如 CMS 输出）时才用它。标准写法必须同时满足：
-
content: ""—— 不写就等于没生成伪元素 -
display: table—— 比block更稳妥，避免旧版 IE 的 margin 双倍问题，且天然触发 BFC 边界 -
clear: both—— 核心动作，强制伪元素落到所有浮动子项下方
额外注意点：
- Chrome DevTools 默认不显示
::after，要手动勾选 “Show user agent shadow DOM” 才能看到是否渲染成功 - 父容器若写了
height或min-height，会覆盖clearfix带来的高度计算 - 嵌套浮动结构中，每一级「直接包裹浮动子项」的容器都得单独加
.clearfix；外层加了不代表内层自动生效
最容易被忽略的一点：问题根源往往不在“怎么清”，而在“为什么还在用 float 做布局”——如果只是为了让子元素横排，flex 或 grid 才是现代解法；而一旦父容器已是 display: flex 或 display: grid，子元素的 float 会直接失效，此时再加 flow-root 或 clearfix 不仅无用，还会干扰调试。
