外边距重叠是相邻块级元素垂直方向margin合并取较大值的规范行为；bfc通过创建独立渲染区域阻止该行为，display: flow-root是首选触发方式，需在父元素上设置以解决父子margin重叠。
什么是外边距重叠（margin collapse）
相邻块级元素的垂直 margin-top 和 margin-bottom 会合并成一个，取两者中较大的值——这不是 bug，是 CSS 规范定义的行为。常见于：div 之间、父元素与第一个/最后一个子元素之间。
为什么 BFC 能阻止 margin 重叠
BFC 是一个独立的渲染区域，内部的盒模型布局不受外部影响，外部也不受内部 margin 重叠规则干扰。触发 BFC 后，元素会形成隔离容器，其子元素的 margin 不再和外部元素“见面”。
常用触发方式（任选其一即可）：
-
overflow值为hidden、auto或scroll（不包括visible） -
display为flow-root（最干净的现代方案） -
float不为none -
position为absolute或fixed -
contain为layout、content或paint
display: flow-root 是首选方案吗
是的，它专为解决这类布局副作用而生：不改变文档流、不触发 float 的副作用、不引起 overflow 隐藏意外内容、语义清晰。相比 overflow: hidden，它不会裁剪 position: absolute 子元素或阴影溢出。
示例：
.container {
display: flow-root; /* 就这一行，父容器不再和子元素 margin 重叠 */
}
.child {
margin-top: 20px;
margin-bottom: 20px;
}
注意：flow-root 在 Safari 15.4+、Chrome 58+、Firefox 55+ 支持良好；若需兼容 IE 或老版 Safari，改用 overflow: hidden 更稳妥。
父容器和第一个子元素的 margin-top 重叠怎么破
这是最易忽略的场景：父元素没边框、内边距、内容区，且子元素有 margin-top，结果父元素顶部“被顶开”——实际是父子 margin 合并了。
解决方法不是给子元素加 padding 或 border（治标），而是让父元素创建 BFC：
- 加
display: flow-root（推荐） - 加
padding-top: 0.1px（最小有效值，不影响视觉） - 加
border-top: 1px solid transparent - 避免用
overflow: hidden——万一子元素要下拉菜单或 tooltip，会被截断
真正容易被忽略的是：BFC 必须由“参与当前 margin 合并链”的那个元素自身触发。比如想隔断父子重叠，必须在父元素上设 BFC，而不是只改子元素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
