flex子项不发生margin重叠，是因为其处于flex格式化上下文（ffc）而非块级格式化上下文（bfc），ffc中无相邻块级兄弟概念，margin行为是累加而非折叠。
Flex子项本身不发生margin重叠——这不是“防止失效”，而是它压根就不触发。问题出在你误用了块级布局的思维去写Flex，或者父容器没切到Flex上下文。
为什么flex子项不会margin重叠
Flex布局中，子元素默认是flex-item，脱离普通文档流的块级格式化上下文（BFC），垂直方向的margin-top/margin-bottom不再合并。这是规范行为，不是“修复后才有效”。
- 两个相邻
div在display: block下：margin-bottom: 20px+margin-top: 30px→ 实际间距30px - 同一对
div放进display: flex; flex-direction: column容器里：间距就是50px，完全相加 - 哪怕子项是
display: block，只要父容器是flex，它们就按flex-item规则处理，不参与margin collapse
常见误判：你以为在用Flex，其实没生效
很多“重叠还在”的情况，其实是Flex根本没跑起来。检查这几点：
- 父容器是否真的设了
display: flex？注意拼写、是否被后续CSS覆盖（比如display: block !important） - 子项有没有被
float、position: absolute或display: contents意外拉出Flex流 - 是否写了
flex-direction: row却指望margin-top起作用？row方向只响应margin-left/margin-right - 浏览器控制台里选中父容器，看Computed面板中
display值是不是flex，而不是inline-flex或回退成block
别用margin控制flex子项间距——改用gap
即使margin不重叠，手动写margin也容易出错：兄弟项要协调上下值、首尾需特殊处理、动态插入时易错位。直接换gap更稳。
-
flex-direction: column时：gap: 16px替代所有margin-bottom和margin-top -
flex-direction: row时：gap: 8px替代margin-right等 - IE全系不支持
gap；Safari需14.1+；可用@supports (gap: 1px)做渐进增强 - 如果必须兼容老浏览器，用
display: flex+ 单向margin（如只设margin-right，末项:last-child { margin-right: 0 }）
当flex子项看起来“重叠”，大概率是别的问题
所谓“margin重叠失效”，往往其实是视觉干扰。先停掉所有z-index和transform，用outline: 1px solid red描边看真实占位：
- 子项有
negative margin？它只偏移渲染位置，不改变布局占位，后面元素仍按原位置排布，造成覆盖假象 - 父容器
overflow: hidden裁掉了溢出部分，让本该撑开的子项“消失”，看起来像重叠 - 图片或
textarea没设min-width: 0，在flex中拒绝收缩，把兄弟项挤出视口——不是重叠，是溢出 - 用了
order但误以为能控制层叠顺序：它只改显示顺序，不改z-index或定位，盖不住没设position的同级元素
真正容易被忽略的是：Flex一启用，margin重叠机制就自动退出舞台。如果你还在为“怎么防止它失效”纠结，说明要么Flex没生效，要么你正用块级思维调试Flex布局——这时候该检查父容器display值，而不是调margin。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
