外边距合并是CSS规范定义的垂直相邻块级元素margin折叠行为，同号取大、异号相加，仅发生在normal flow中；父子或兄弟元素间因无border/padding等隔离而触发，导致margin-top“消失”至父容器外。
为什么 margin-top 和 margin-bottom 会“消失”
相邻块级元素的垂直外边距（margin）会合并成一个，取两者中较大者——这就是 margin collapse。常见于父子容器间（如父容器没边框/内边距，子元素 margin-top 会“顶穿”出来），或兄弟块之间（如两个 <p></p> 紧挨着，上下 margin 合并）。它不是 bug，是 CSS 规范行为，但常导致布局错位。
创建 BFC 是最直接的修复方式
BFC（Block Formatting Context）是一个独立渲染区域，内部元素不会与外部发生 margin collapse。触发 BFC 的方式很多，但要注意：不是所有都适合修复 margin collapse 场景。
-
overflow: hidden、overflow: auto最常用，兼容性好（IE8+），且不改变盒模型尺寸 -
display: flow-root是专为此设计的现代方案（Chrome 64+/Firefox 58+/Safari 15.4+），语义清晰，无副作用 - 避免用
float: left或position: absolute，它们虽能触发 BFC，但会脱离文档流，引发新布局问题 -
display: inline-block也触发 BFC，但会引入行内元素的空白间隙，需额外处理
display: flow-root 的典型用法
当你要包裹一组可能产生垂直 margin collapse 的子元素（比如多个 <div> 或 <code><p></p>），直接给父容器设 display: flow-root：
.container {
display: flow-root;
}
.container > p {
margin: 20px 0;
}
此时每个 <p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a>
<p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div> 的 margin-top 和 margin-bottom 不再与兄弟或父容器合并，间距可预测。注意：它不影响 flex/grid 容器，因为它们本身已建立独立格式化上下文。
立即学习“前端免费学习笔记（深入）”；
容易忽略的父子 collapse 场景
父容器没有上边框、上内边距、上阴影，且第一个子元素有 margin-top，这个 margin 会“冒泡”到父容器外——这是最隐蔽的 collapse 类型。
- 修复首选：
padding-top: 1px或border-top: 1px solid transparent（轻量、兼容） - 次选：
display: flow-root（父容器变 BFC，子元素 margin 被截断在内部） - 别用
margin-top: -20px抵消——治标不治本，响应式下极易崩坏 - 检查是否误用了
box-sizing: border-box但忘了设border或padding，这会让 BFC 触发条件失效
BFC 不是银弹，关键在识别 collapse 发生在哪一层——父子？兄弟？还是嵌套多层？先用浏览器开发者工具的 Layout 面板确认 margin 实际生效位置，再选对应触发方式。
