Flex布局能直接绕过margin重叠问题，因其容器创建BFC且子项margin不塌陷；推荐用gap控制间距，auto margin实现特殊对齐；需注意IE兼容性及语义结构。
用 Flex 布局能直接绕过 margin 重叠问题，因为 Flex 容器中的子元素默认不触发传统块流下的外边距塌陷规则。
Flex 布局天然隔离 margin 重叠
当容器设为 display: flex 或 display: inline-flex，它会自动创建一个新的 BFC（块级格式化上下文），同时子项的 margin 不再参与垂直方向的折叠计算。兄弟元素之间、父子元素之间的 margin 重叠全部失效，间距按设定值累加或由 gap 控制。
- 相邻子元素的 margin-top 和 margin-bottom 不再合并
- 第一个子元素的 margin-top 不再“穿透”到父容器顶部
- 最后一个子元素的 margin-bottom 不再影响父容器整体高度
用 gap 替代等距 margin 更可靠
在 Flex 容器中，优先用 gap（主轴/交叉轴间距）控制子项间隔，比每个子项单独设 margin 更干净、无冲突。
-
gap: 12px等效于所有相邻子项间保持 12px 间隙，且不会叠加、不会塌陷 - 避免给多个子项重复写
margin-right或margin-bottom，减少冗余和意外覆盖 - 响应式时可直接改
gap值，无需维护一堆 :last-child 规则
特殊对齐仍可用 auto margin
Flex 下的 margin 依然有效，尤其适合处理例外对齐，比如右对齐按钮、居中标题、分隔区块。
立即学习“前端免费学习笔记（深入）”；
-
margin-left: auto推最后一项靠右 -
margin: auto在有固定高度的容器中实现垂直+水平居中 - 只需对目标子项设置，不影响其他元素的 spacing 逻辑
注意兼容性和结构小细节
Flex 解决 margin 重叠很高效，但要注意两点：
- IE10+ 支持基本 flex 属性，
gap在 IE 中不支持，如需兼容可降级为 margin + :not(:last-child) - 别把原本是块级流布局的嵌套结构直接套 flex，可能打乱语义顺序；建议只对明确需要并排或对齐的局部容器启用
基本上就这些。Flex 不是万能胶，但对消除 margin 重叠确实是最简洁、最现代的选择。不复杂但容易忽略。
