垂直外边距不折叠是规范明确要求而非失效；当元素脱离标准流、父容器创建新bfc、兄弟间存在物理隔离或布局上下文为flex/grid时，折叠被阻止；display: flow-root是最推荐的bfc触发方式。
垂直外边距不折叠，是因为某个折叠条件被打破了——不是“意外失效”，而是规范明确要求它不参与折叠。
哪些情况会阻止 margin 折叠发生
只要以下任一条件成立，垂直 margin 就不会折叠：
- 元素不在标准文档流中：
float、position: absolute、position: fixed的元素完全脱离流，其 margin 不参与任何折叠 - 父子关系中父容器创建了新的 BFC：
overflow: hidden、display: flow-root、contain: layout都会让父元素与子元素的 margin 断开连接 - 兄弟元素之间存在物理隔离：
border-top、padding-top、非空文本节点、clear元素，哪怕只有1px，也足以阻断折叠 - 布局上下文改变：Flex 容器或 Grid 容器的直接子元素，无论是否块级，
margin都不折叠——它们走的是 flex/grid 自己的间距逻辑
display: flow-root 是最推荐的 BFC 触发方式
它专为解决这类问题设计，语义清晰且无副作用：
-
overflow: hidden虽能触发 BFC，但可能意外裁剪position: absolute子元素或溢出动画 -
display: inline-block或float会改变元素的流内行为，引发其他布局连锁反应 -
display: flow-root保持块级表现，仅新增一个独立 BFC，父子 margin 不再穿透，兄弟 margin 也不再合并
示例：<div style="display: flow-root"><div style="margin-top: 20px"></div></div> —— 此时子元素的 margin-top 不会“撑开”父容器顶部空白。
父子折叠最容易被忽略的视觉表现
它不产生“可见间隙”，而是让整个父容器上移——你调子元素的 margin-top，结果是父容器离上面的元素更远了，而不是父子之间多了空隙。
- 检查布局错位时，优先看父容器是否有
padding-top或border-top，比反复改子元素 margin 更有效 - 开发者工具里看到子元素 computed
margin-top是 20px，但父子间距离为 0，大概率就是父子折叠在生效 - 空 div 的自身上下 margin 也会折叠：
<div style="margin: 20px 0"></div>实际只占 20px 高，不是 40px
真正难处理的，不是“怎么让它不折叠”，而是“什么时候该让它折叠”——比如段落 p 默认样式靠的就是这个机制保持行距均匀。强行全用 gap 或 padding 替代，反而会让语义和维护成本上升。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
