margin塌陷不是bug而是css规范定义的垂直外边距折叠行为，仅发生于普通流块级元素间；父子塌陷因父元素未触发bfc导致子元素margin-top“穿透”；display:flow-root是最干净的bfc解决方案，现代浏览器支持良好且无副作用。
margin 塌陷和合并不是 bug，是 CSS 规范明确规定的垂直外边距折叠（margin collapse）行为，只发生在普通流中块级元素的 margin-top 与 margin-bottom 之间。想“修复”它，关键不是调数值，而是打断合并发生的条件。
为什么 margin-top 会“穿透”父元素？
这是父子塌陷：当父元素是 display: block、没有 border、没有 padding、未触发 BFC，且第一个子元素设置了 margin-top 时，该 margin 会与父元素自身的上外边距合并（取较大值），视觉上就像子元素把父容器整体往下顶了。
- 这不是渲染错误，而是排版逻辑——段落间本就不该叠加上下 margin
- 水平方向（
margin-left/margin-right）永远不合并，这点可放心 - 只要父元素满足任一 BFC 触发条件（如
display: flow-root），该现象立即消失 - 用
padding-top替代子元素margin-top能绕过，但会改变盒模型语义，慎用于需精确控制背景/阴影的场景
display: flow-root 是最干净的 BFC 解决方案
它是专为解决此类问题设计的 display 值，现代浏览器支持良好（Chrome 64+ / Firefox 59+ / Edge 79+ / Safari 15.4+），无副作用。
- 写在父容器上即可：
.parent { display: flow-root; } - 不改变尺寸、不裁剪
box-shadow、不干扰position: absolute子元素定位 - 不像
overflow: hidden那样可能意外隐藏溢出内容或滚动条 - IE 完全不支持，若需兼容 IE，应降级为
overflow: hidden或透明边框方案
用 gap 替代 margin 可彻底绕过合并逻辑
当你控制的是容器本身（比如卡片列表、表单字段组），直接改用 display: flex 或 display: grid + gap，就能天然规避所有 margin 合并。
-
gap是布局容器原生间距接口，值不会被合并，也不影响子元素盒模型 - 支持响应式单位：
gap: clamp(8px, 2vw, 16px)比固定margin更灵活 - Flex 容器需确保
flex-direction: column才能让gap在垂直方向生效 - 别在 flex/grid 容器自身再设
margin来“补间距”，那又回到老问题
别滥用 overflow: hidden 触发 BFC
它虽兼容性最好（IE6+），但本质是靠创建渲染隔离区起作用，副作用明显。
- 若父元素内有
position: absolute子元素超出边界、下拉菜单、或依赖box-shadow扩展的视觉效果，可能被意外裁剪 -
overflow: auto在缩放、高 DPI 或某些响应式断点下，可能无故出现滚动条 -
overflow: clip更干净，但仅支持较新浏览器（Chrome 93+ / Firefox 93+ / Safari 15.4+） - 伪元素法（如
.parent::before { content: ""; display: table; }）无视觉副作用，但多了一行不可见 DOM 节点
真正容易被忽略的点在于：很多人试图靠“删掉一个 margin”或“调小数值”来缓解问题，但这只是掩盖症状。只要合并条件还在，换种结构、加个组件、改个断点，问题就会重现。根治必须从格式化上下文（BFC）或布局模型（Flex/Grid）层面入手。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
