display: flow-root 是解决 margin 重叠最干净的 BFC 触发方式，专为创建无副作用 BFC 设计，不裁剪内容、不触发滚动条、不破坏文档流；而 overflow: hidden 虽能触发 BFC，但会意外裁剪绝对定位元素、阴影及下拉菜单，且旧版 Safari 中可能引发渲染闪烁。
display: flow-root 是解决 margin 重叠最干净、副作用最小的 BFC 触发方式，不是所有 overflow 都安全，也不是所有 BFC 方式都适合布局。
为什么 overflow: hidden 不是万能解法
它确实能触发 BFC，但副作用真实存在：overflow: hidden 会裁剪超出容器的内容，比如悬停展开的下拉菜单、position: absolute 的提示框、甚至 box-shadow 都可能被意外截断。更隐蔽的问题是：当子元素有 transform 或动画时，某些浏览器（尤其是旧版 Safari）会因渲染层变化导致闪烁或错位。如果你只是想隔离 margin，却顺手关掉了内容溢出能力，就属于典型的功能越界。
display: flow-root 为什么是首选
它是 CSS Display Module Level 3 中专为“创建无副作用 BFC”设计的值，不改变元素的文档流位置，不触发滚动条，也不影响子元素的定位行为。关键点：
-
display: flow-root在 Chrome 58+、Firefox 55+、Safari 10.1+、Edge 79+ 均已稳定支持，IE 完全不支持（需另配 fallback） - 它不会像
float: left那样让元素脱离文档流，也不会像position: absolute那样破坏父容器高度计算 - 写法直观：
.parent { display: flow-root; }—— 语义就是“这个容器要独立管理内部布局”
哪些 margin 重叠场景真该用 BFC
BFC 的本质是「隔离」，不是「修复」。只有当重叠发生在同一 BFC 内部时，才需要它：
立即学习“前端免费学习笔记（深入）”；
- 父子重叠：父容器没
border、没padding、没内容分隔 → 给父加display: flow-root - 兄弟重叠：两个相邻
<div> 各设了 <code>margin-bottom和margin-top→ 给其中一个包一层display: flow-root容器 - 清除浮动后仍塌陷：
clear: both不等于创建新 BFC → 在清除元素上直接加display: flow-root - 首选
padding-top: 1px：比透明边框更可控，不增加视觉干扰，且不会在高对比度模式下暴露异常 - 次选
border-top: 1px solid transparent：确保宽度 > 0、样式非none，否则无效 - 慎用
overflow: auto：虽比hidden宽松，但滚动条仍可能闪现，尤其在动态内容加载时
别对 <button></button> 或 <input> 加 BFC：它们默认是替换元素或行内级，不参与块级 margin 重叠。
兼容性兜底时怎么选替代方案
若必须支持 IE11 或极旧安卓 WebView，display: flow-root 失效，可按优先级降级：
真正容易被忽略的是：BFC 必须「生效」——如果父容器本身已被其他规则（如 display: flex）接管了格式化上下文，再加 flow-root 就是冗余操作。检查 computed style 中的 display 值是否最终为 flow-root，而不是被覆盖或降级。
