display: flow-root 是最干净无副作用的解决方案；若需兼容 IE8–11，则用 overflow: hidden 或 auto。根本原因是垂直外边距折叠：当父元素无 border、padding、inline content 且未触发 BFC 时，其第一个子元素的 margin-top 会与父元素上外边距合并而“顶穿”容器。
直接结论：用 display: flow-root 是最干净、无副作用的方案；若需兼容 IE8–11，改用 overflow: hidden 或 overflow: auto。
为什么 margin-top 会“顶穿”父容器？
这不是 bug，是 CSS 规范定义的垂直外边距折叠（margin collapse）行为：当父元素没有 border、padding、inline content，且未触发 BFC 时，其第一个子元素的 margin-top 会和父元素自身的上外边距合并，最终“溢出”到父容器外部。同理，margin-bottom 也可能“塌陷”进父容器底部。
常见表现包括：
- 给父
<div> 设了 <code>margin: 40px，但实际顶部空白只有 20px（因为子元素margin-top: 20px折叠进来了） - 两个相邻
<p></p>各设margin-bottom: 20px和margin-top: 30px，结果间距只有 30px 而非 50px - 父容器高度计算异常，尤其在配合
min-height或 flex 布局时更难排查 - 包裹一组可能产生垂直 margin collapse 的子元素（如多个
<div>、<code><p></p>、<section></section>） - 需要保留正常文档流，同时隔离内外 margin 行为
- 项目已放弃 IE11 及更早版本（Chrome 64+/Firefox 58+/Safari 15.4+ 支持）
display: flow-root 是专为此设计的现代解法
它是 CSS Display Module Level 3 中明确为创建 BFC 而引入的值，语义清晰、无布局副作用，且不改变盒模型尺寸或触发滚动条。
立即学习“前端免费学习笔记（深入）”；
适用场景：
示例：
.card-list {
display: flow-root;
}
.card-list > * {
margin: 20px 0;
}此时每个子元素的上下 margin 不再与邻居折叠，总间距 = 所有 margin 之和。
兼容旧浏览器时，overflow 是最稳妥的替代
overflow: hidden 或 overflow: auto 能可靠触发 BFC，且从 IE8 起就支持。但它有隐性代价：
-
overflow: hidden会裁剪溢出内容（比如绝对定位子元素超出边界） -
overflow: auto在某些情况下可能意外出现滚动条（尤其当内容动态变化时） - 两者都会让父容器变成新的 stacking context，影响
z-index层级关系
不推荐的触发方式：
-
float: left或position: absolute：虽能创建 BFC，但会让元素脱离文档流，引发新布局问题 -
display: inline-block：会引入行内元素特有的空白间隙，需额外处理font-size: 0或注释 -
display: flex或display: grid：会强制子元素按 flex/grid 规则排列，改变原有布局逻辑
BFC 并不能“完全隔离”所有 margin 行为
一个常见误解是：只要父元素触发了 BFC，内部所有 margin 就绝对不和外部折叠。实际上：
- BFC 只阻止**毗邻盒子之间**的折叠，即父子、兄弟、空元素这三类典型场景
- 如果父元素本身是普通流中某个块的子元素，它自己的外边距仍可能和它的兄弟元素折叠（除非它的父级也触发 BFC）
- BFC 对水平方向 margin 无影响——左右 margin 永远不会折叠
真正关键的不是“用了 BFC”，而是**确认哪些元素毗邻、是否被 border/padding 隔开、是否处于 normal flow**。很多 margin 折叠问题，加一行 padding: 0.1px 就能破局，比硬套 BFC 更轻量。
