margin collapsing 是相邻块级元素垂直外边距合并为较大值的现象；可通过 display: flow-root 等方式阻止，但应先确认是否需打破该规范行为。
什么是 margin collapsing？
相邻块级元素的垂直 margin 会合并成一个，取两者中较大的值，而不是相加。这常导致布局“塌陷”——比如两个 <p></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> 或 <code><p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11815" title="CDP浏览器大师"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="CDP浏览器大师" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11815" title="CDP浏览器大师">CDP浏览器大师</a>
<p>CDP浏览器大师：通过Chrome DevTools Protocol驱动已登录浏览器实现自动化任务，解决反爬封号、选择器失效、SPA路由难导航、固定sleep不准四大痛点。核心能力包括UA伪装、WebGL/Canvas指纹混淆、智能等待、动态选择器以及可视化调试。</p>
</div>
<a href="/xiazai/skill11815" title="CDP浏览器大师" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>）默认会折叠垂直 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 反而让排版更紧凑自然。
