overflow:hidden通过触发BFC阻止margin塌陷，但会裁剪溢出内容、干扰滚动；display:flow-root是专为隔离设计的现代方案，无副作用且语义明确。
因为 overflow: hidden 会触发 BFC（块格式化上下文），让父容器边界成为“隔离墙”，阻止子元素的 margin-top 或 margin-bottom 向外传播——它不是“修复”了塌陷，而是用隔离机制绕过了塌陷发生的条件。
overflow:hidden 触发 BFC 的真实条件
它必须作用在「参与塌陷的共同祖先」上，且该元素本身得是块级盒（display: block 或 inline-block 等）。常见失效场景包括：
- 写在子元素上：比如只给
p加overflow: hidden，对父子塌陷完全无效 - 被更高优先级规则覆盖：后面有
overflow: visible !important就直接失效 - 父容器是 Flex/Grid：此时它已自带更严格的格式化上下文，
overflow不再额外触发新 BFC，但也不会报错
为什么看起来“修好了”，却可能埋雷？
overflow: hidden 解决塌陷是副作用，不是本职工作。它同时会：
- 裁剪所有溢出内容：包括
position: absolute子元素、下拉菜单、tooltip、阴影（box-shadow）、transform 位移后的部分 - 干扰滚动行为：如果父容器本应可滚动，
hidden会让内容不可见且无法滚动 - 在某些旧版 Safari 中，配合
transform可能意外破坏包含块层级，导致 BFC 实际未生效
和 display: flow-root 的关键区别
两者都创建 BFC，但行为逻辑完全不同：
-
display: flow-root是专为隔离设计的：不裁剪、不改变盒尺寸、不影响子项定位，语义清晰 -
overflow: hidden是“顺带”隔离：主要职责是溢出控制，隔离只是附带效果，副作用明确且不可忽略 - 兼容性上，
flow-root在 Chrome 64+ / Firefox 58+ / Safari 15.4+ 已稳定支持；若需兼容 IE 或 Safari padding-top: 0.1px 或border-top
真正容易被忽略的点是：BFC 不是让 margin “消失”或“变大”，而是把它收容在容器内部——你看到的“没效果”，其实是它按规范工作得太彻底了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
