flex/grid子元素、浮动/绝对定位元素、内联级/inline-block/表格相关元素均不触发margin折叠；父容器创建bfc或添加非零边框/填充可阻断父子折叠；兄弟折叠可通过gap、单向margin或伪元素规避。
哪些元素之间根本不会触发 margin 折叠
margin 折叠只在特定条件下发生，不是所有块级元素相邻就一定折叠。最直接的判断是：display 类型和布局上下文决定“有没有资格参与折叠”。
- Flex 容器（
display: flex）或 Grid 容器（display: grid）的直接子元素，完全不参与 margin 折叠——哪怕它们是块级元素、垂直排列、没 padding/border -
float元素、position: absolute或position: fixed元素，脱离普通流，其 margin 不会与任何其他元素折叠 - 内联级元素（如
span、em）本身不接受垂直 margin，自然不参与折叠；display: inline-block元素虽能设margin-top/margin-bottom，但也不会与其他元素折叠 - 表格相关 display 值（如
display: table-cell、display: table-row）也不触发折叠
父容器加了什么就立刻阻断父子 margin 折叠
父子间折叠（比如子元素 margin-top 导致整个父容器下移）本质是父容器没形成“隔离墙”。只要加一项能创建 BFC（Block Formatting Context）或引入物理分隔，折叠就失效。
-
display: flow-root是现代首选：语义清晰、无副作用、不裁剪溢出内容，Chrome 64+/Firefox 58+/Safari 15.4+ 全支持 -
overflow: hidden（或auto、scroll）也能创建 BFC，但要注意：如果子元素有position: absolute或阴影超出父容器，会被裁剪 -
border-top: 1px solid transparent或padding-top: 0.1px：靠“非空边框”或“非零 padding”物理隔开，兼容性好，且不影响盒模型尺寸（尤其box-sizing: border-box下） - 注意：
border: none或border: 0无效——必须是非零宽度的边框才起作用
兄弟元素间 margin 折叠被绕过的实用方式
两个相邻 div 的 margin-bottom 和 margin-top 合并，常导致间距小于预期。与其“阻止折叠”，不如换种更可控的布局逻辑。
- 用
gap替代 margin：父容器设display: flex; flex-direction: column;，再加gap: 20px——gap不参与任何折叠，值就是最终间距 - 统一单向 margin：所有子项只设
margin-bottom，末尾用:last-child { margin-bottom: 0; }，避免双向设置带来的不确定性 - 用伪元素占位：
.parent::before { content: ""; display: block; height: 20px; }，把空白变成“有内容”的块，天然打破毗邻条件
容易被忽略的“折叠失效”边界情况
有些看似满足折叠条件，实际却不折叠——不是 bug，是规范隐含限制。
- 父元素
height不是auto（比如设了height: 200px），它的margin-bottom就不会和最后一个子元素的margin-bottom折叠 - 根元素（
html）的 margin 永远不参与任何折叠，无论它有没有 border/padding - 元素设置了
clear（如clear: both），其上下 margin 仍可能折叠，但折叠后的结果不会再和父元素的 margin 继续合并 - 负 margin 参与计算时，规则是“取绝对值最大者相加”，但前提是它们真正在同一 BFC 内毗邻——一旦中间有浮动元素或 BFC 分隔，就各自独立
真正难调试的，从来不是“为什么折叠了”，而是“为什么没按我想的折叠”。关键要盯住 computed styles 里的 margin 值，确认它到底被谁吸收、被谁阻断，而不是只看声明样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
