overflow: hidden 和 display: flow-root 都可以用来创建块级格式化上下文 (Block Formatting Context, BFC)，从而解决一些常见的布局问题（如父元素高度塌陷、外边距折叠等）。但它们的机制和副作用完全不同。

以下是它们的主要区别：

1. 核心目的与副作用

• overflow: hidden:

  • 主要目的：控制内容溢出容器时的显示方式（隐藏、滚动、可见等）。
  • 副作用：当 overflow 的值不是 visible 时（如 hidden, auto, scroll），会创建一个新的 BFC。这是它被用来“清除浮动”或防止外边距折叠的原理。
  • 关键副作用：任何超出容器边界的内容都会被裁剪（隐藏或出现滚动条）。这通常不是你想要的，尤其是在处理动态内容或阴影、下拉菜单时。

• display: flow-root:

  • 主要目的：专门为了创建一个新的 BFC 而设计的。它的唯一作用就是建立一个独立的布局环境。
  • 副作用：没有裁剪内容的副作用。容器内的内容可以正常溢出显示（除非另有样式限制）。

2. 对内容溢出的影响

• overflow: hidden:

  • 会裁剪溢出内容。如果子元素的位置超出了父元素的边界（例如，使用 position: absolute 或负的 margin），这些部分将不可见。
  • 示例：一个带有阴影的按钮或一个下拉菜单，如果父元素设置了 overflow: hidden，阴影或下拉部分可能会被切掉。

• display: flow-root:

  • 不会裁剪溢出内容。它只影响布局上下文，不影响内容的可见性。
  • 示例：浮动的元素被包含在内（解决高度塌陷），但绝对定位的子元素或下拉菜单可以正常显示在容器之外。

3. 浏览器支持

• overflow: hidden:

  • 支持度极高，所有现代浏览器和非常老的浏览器都支持。

• display: flow-root:

  • 相对较新。现代浏览器（Chrome 64+, Firefox 58+, Edge 79+, Safari 11.1+）支持良好。
  • 不支持 IE 和一些非常老的移动端浏览器。

4. 性能

• overflow: hidden:

  • 在某些情况下（尤其是移动端或复杂布局中），创建滚动上下文可能会带来轻微的性能开销或影响 GPU 加速。

• display: flow-root:

  • 作为专门为此目的设计的属性，通常被认为更轻量、更直接，性能影响更小。

总结对比表

使用建议

• 优先使用 display: flow-root: 如果你的项目不需要支持 IE 或非常老的浏览器，并且你只是想创建一个 BFC 来解决布局问题（如包含浮动、防止外边距折叠），display: flow-root 是更现代、更语义化、副作用更少的选择。
• 使用 overflow: hidden: 当你需要同时创建 BFC 并且 确实需要隐藏溢出内容时。或者在需要兼容老旧浏览器的项目中，作为创建 BFC 的“传统”方法。

简单来说：display: flow-root 是为了解决 overflow: hidden 被滥用来创建 BFC 时带来的裁剪副作用而诞生的更优雅的解决方案。