好用的 display: flow-root

一、display: flow-root 的作用

flow-root 会让元素 创建一个新的块级格式化上下文（BFC）。
效果包括：

1. 内部的垂直外边距不会与外部元素重叠（阻止 margin collapsing）

2. 浮动元素会被包含（父元素自动包裹浮动子元素）

3. 内部布局与外部布局隔离

换句话说，flow-root 相当于给元素加了“独立的布局容器”，但不会改变元素本身的块级特性。

---

二、与 flex 的关系

• display: flex 会创建 弹性布局容器，也会触发 BFC（块级格式化上下文），但子元素变成 flex items。

• display: flow-root 不会改变内部子元素的布局方式，它依然是普通文档流的块级元素，只是触发了 BFC。

所以：

div {display: flow-root;
}

• 默认 div 本身是块级元素 → 依然块级

• 内部子元素依然在普通文档流中排列

• 对布局本身没有副作用（不像 flex 会改变子元素排列方式）

• 但是可以解决 margin 重叠或浮动包含问题

---

三、结论

display: flow-root 是一种“安全”的 BFC 创建方式：
它不会改变默认块级布局、不会影响子元素的排列，也不会引入额外副作用。
在现代开发中，是替代 overflow: hidden 的首选方式。