display: flow-root 是最安全解法，专为隔离浮动与 margin 塌陷设计，不裁剪内容、不干扰定位；overflow: hidden 虽能触发 BFC，但会裁剪绝对定位元素、不隔离 margin 合并、旧版 Safari 中配合 transform 易闪烁。

display: flow-root 是当前最干净、副作用最小的解决方案，但必须作用在“参与重叠”的父容器上，而不是浮动元素自身或任意外层。

为什么 overflow: hidden 不是好选择

它确实能触发 BFC 并阻止 margin collapse，但会带来实际布局风险：

• overflow: hidden 会裁剪所有溢出内容：比如 box-shadow、position: absolute 的下拉菜单、tooltip 全部被截断
• 旧版 Safari 中配合 transform 可能出现闪烁
• 最关键的是：它虽清除了浮动，却让非浮动子元素仍处于同一 BFC 内——它们之间的垂直 margin 依然会合并

display: flow-root 的正确用法

这是专为解决这类问题设计的现代属性（Chrome 64+/Firefox 58+/Safari 15.4+），语义明确且无副作用：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

• 必须加在“参与 margin 合并”的容器上，例如父子重叠时加在父元素，兄弟重叠时加在共同父容器
• 不要给浮动元素自己加 display: flow-root——它已脱离 normal flow，加了也无效
• 如果父容器已经是 display: flex 或 display: grid，再加 flow-root 无效，因为 Flex/Grid 本身已是独立格式化上下文
• 示例：.wrapper { display: flow-root; } → 包裹多个
  或
  后，它们之间不再发生垂直 margin 合并

  BFC 隔离是局部的，别指望一层搞定全部

  一个容器设了 display: flow-root，只隔离它内部与外部的 margin 合并，不改变它和它兄弟容器之间的关系：

  • 如果 .section-a 和 .section-b 是同级块，且都未创建 BFC，它们各自的 margin-bottom 和 margin-top 仍可能合并
  • 复杂嵌套中，得逐层检查哪些容器真正处在 margin 合并链上——比如父容器无 border、无 padding、无内容分隔，又没触发 BFC，才需要干预
  • 最易被忽略的点：空元素自身的 margin-top 和 margin-bottom 也会折叠，这种场景加 flow-root 没用，得换思路（比如改用 padding 或伪元素占位）

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！