display:flex能阻止父子margin重叠，因为它创建flex formatting context，子元素变为flex item，脱离normal flow，而margin重叠仅发生在normal flow块级盒之间。
display:flex 为什么能阻止父子 margin 重叠
因为 display: flex 会为父容器创建一个新的 BFC（块级格式化上下文），而 BFC 的核心特性之一就是：**内部的 margin 不会与外部元素发生合并**。子元素的 margin-top 不再“穿透”父容器，而是老老实实作用于父容器内部布局流中。
这不是 flex “修复”了 margin 重叠，而是它彻底绕开了触发条件——CSS 规范明确指出：margin 重叠只发生在 normal flow 中的块级盒之间。display: flex 让父容器变成一个 flex formatting context，子元素自动成为 flex item，不再参与普通流的垂直 margin 合并规则。
为什么兄弟元素之间也不再重叠
flex 容器内的直接子元素（即 flex items）默认不构成“相邻块级元素”关系。它们的排列由 flex 轴和 gap 控制，而非文档流中的上下毗邻。因此：
-
margin-top和margin-bottom在flex-direction: column下仍存在，但不会合并——因为它们属于不同 flex item，且 flex layout engine 不执行 margin collapse 算法 -
gap是独立于 margin 的间距机制，优先级更高；设了gap: 20px后，即使子元素还带着margin-bottom: 10px，也不会叠加或冲突，只是可能造成额外空白 - 若用
flex-direction: row，垂直方向的margin-top/margin-bottom对齐无影响，更不会触发重叠
容易踩的坑：flex 并不等于“万能隔离”
别以为加了 display: flex 就一劳永逸。以下情况 margin 重叠仍可能发生：
- 父容器设了
display: flex，但子元素里嵌套了一个普通div（未设 display），这个内层div和它的兄弟仍可能触发兄弟间 margin 重叠 - flex 容器自身如果和上/下兄弟块级元素相邻，且它没设
border/padding，它的margin-top或margin-bottom仍会和外部元素合并——display: flex只隔离内部，不自动给自身加 BFC 外壳来阻断内外 - 用
align-items: flex-start+ 子元素margin-top模拟“上推”，结果发现视觉错位——这不是重叠，是 flex 主轴对齐逻辑覆盖了 margin 行为，得改用margin-block-start或调整justify-content
对比 display: flow-root 更轻量？不一定
display: flow-root 是专为创建 BFC 而生，语义清晰、零副作用；display: flex 则附带了整套 flex 布局行为。如果你只需要阻断 margin 重叠，却顺手启用了 flex 排列、换行、对齐等能力，反而可能引入意料之外的尺寸计算或响应式干扰。
比如：flex 容器默认 min-width: auto，可能撑宽父级；而 flow-root 完全保持原有块级行为。在纯内容容器（如文章段落 wrapper）中硬上 flex，常导致文字换行异常或宽度溢出。
真正容易被忽略的是：**BFC 隔离是单向的**。flex 容器能拦住子元素 margin 向外“逃逸”，但拦不住外部 margin 向它“入侵”——想彻底隔绝，得确保它自己也处于一个受控的上下文中（比如外层再套个 flow-root 或设 overflow: hidden）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
