overflow:hidden能触发BFC解决高度塌陷，但属视觉妥协；display:flow-root才是语义化标准解法；伪元素clearfix适用于兼容场景。
overflow:hidden 触发 BFC 是“能用”，不是“该用”
它确实能解决父容器高度塌陷，但本质是靠强制裁剪溢出内容来换取 BFC 创建——这不是语义化修复，而是视觉妥协。很多项目沿用它，只是因为兼容性好（IE6+），而非它更合理。
为什么 overflow:hidden 比 clear:both 更容易“见效”
clear:both 只作用于**自身所在元素**，必须插在浮动子元素之后、且是父容器的直系子节点，否则无效；而 overflow:hidden 直接加在父容器上就能触发 BFC，无需改 HTML 结构。
- 常见错误：给浮动子元素自己加
clear:both—— 完全没用，它不改变父容器盒模型 - 另一个误用：把
clear:both写在父容器 CSS 里 —— CSS 不解析这个声明，浏览器直接忽略 -
overflow:hidden的“见效快”来自副作用，不是设计意图；它让父容器生成 BFC，从而包含浮动子项，但代价是可能切掉box-shadow、transform位移后的内容、或position: absolute的下拉菜单
display:flow-root 才是现代标准解法
display:flow-root 是 W3C 明确为解决高度塌陷设计的属性，它只做一件事：让元素成为 BFC 容器，且不附带任何溢出裁剪、滚动条、布局干扰等副作用。
- 支持情况：Chrome 64+、Firefox 58+、Safari 15.4+（2026 年已覆盖绝大多数真实用户）
- IE 完全不支持，但若需兼容 IE，应单独用伪元素方案，而不是退回到
overflow:hidden - 和
overflow:hidden不同，display:flow-root在 Flex 或 Grid 容器内部依然有效（后者设overflow根本不触发 BFC）
伪元素清除法（.clearfix）仍值得保留
当需要兼容老浏览器，或父容器本身已有 overflow:auto 等设置（再加 hidden 会破坏原有滚动逻辑）时，::after 伪元素仍是稳妥选择。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
.clearfix::after { content: ""; display: table; clear: both; } - 注意：父容器不能是
display: flex或display: grid，否则display: table会被忽略，得改用display: block+height: 0+overflow: hidden - 比空
<div class="clear"></div>更干净，不污染 DOM，也不引入额外 margin/padding 风险
clear，仍可能从浮动元素右侧开始排版——这问题在用 overflow:hidden 时尤其隐蔽，因为它“看起来”一切都对了。 
