margin collapsing 是相邻块级元素垂直外边距合并为较大值的现象；可通过 display: flow-root 等方式阻止，但应先确认是否需打破该规范行为。
什么是 margin collapsing？
相邻块级元素的垂直 margin 会合并成一个，取两者中较大的值，而不是相加。这常导致布局“塌陷”——比如两个 <p> 元素之间只显示 20px 间距，而非预期的 40px（假设各设 margin-bottom: 20px 和 margin-top: 20px）。
如何阻止父子元素间的 margin collapsing？
父元素没边框、内边距或内容分隔时，子元素的上/下 margin 会“穿透”到父元素外边距，造成父容器高度塌陷或位置偏移。
- 给父元素加
border: 1px solid transparent（最轻量，无视觉影响） - 或设
padding: 0.01px（避免触发 BFC 的同时规避渲染异常） - 或启用 BFC：用
overflow: hidden、display: flow-root（推荐，语义清晰且无副作用）
div.container {
display: flow-root; /* 阻断子元素 margin 向上“溢出” */
}兄弟元素间 margin collapsing 怎么处理？
连续的块级兄弟元素（如多个 <div> 或 <p>）默认会折叠垂直 margin，尤其在动态插入内容后容易错乱。
- 统一用
margin-bottom（或全用margin-top），避免上下同时设置 - 改用
gap（仅对 Flex/Grid 容器有效）：display: flex; flex-direction: column; gap: 20px - 用伪元素隔离：
&::before { content: ""; display: table; }（兼容老浏览器）
为什么 display: flow-root 是当前最优解？
它显式创建 BFC，不改变盒模型行为，也不影响 overflow 语义，且支持所有现代浏览器（Chrome 64+/Firefox 59+/Safari 15.4+）。比 overflow: hidden 更安全——不会意外裁剪阴影、下拉菜单等溢出内容。
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的是：margin collapsing 不是 bug，是 CSS 规范定义的行为；强行“修复”前，先确认是否真需要打破它——有时合理利用 collapsing 反而让排版更紧凑自然。
