相邻块级元素垂直外边距会折叠，取较大值；父子元素或空元素也可能发生折叠。可通过添加border/padding、使用BFC、flex/grid布局等方法防止折叠。
在CSS中，margin collapse（外边距折叠）是指当两个垂直方向的外边距相遇时，它们会合并成一个外边距的现象。这种行为只发生在块级元素的垂直方向上（即上下边距），不会影响水平方向的margin。理解并正确处理margin collapse对布局控制非常重要。
什么情况下会发生margin collapse？
常见发生margin collapse的情况包括：
- 相邻兄弟元素之间的上下margin会折叠，取其中较大的那个值
- 父元素与第一个或最后一个子元素的上下margin可能发生折叠
- 空的块级元素（没有border、padding、内容等）其上下margin也会折叠
如何防止margin collapse？
如果你希望避免margin折叠带来的布局问题，可以使用以下几种方法：
1. 添加 border 或 padding
立即学习“前端免费学习笔记（深入）”；
给父元素添加一个微小的border或padding，即可打破折叠条件。例如：
div {
border: 1px solid transparent; /* 破坏折叠 */
}2. 使用 padding 替代 margin
用父元素的padding来控制内部间距，而不是依赖子元素的margin。这样能有效避免父子间的折叠。
3. 应用 BFC（块格式化上下文）
将元素变成BFC容器，可以隔离其内部的margin行为。触发BFC的方法包括：
- 设置
overflow: hidden - 使用
display: flow-root（推荐现代写法） - 设置
float: left/right - 使用
position: absolute
示例：
.container {
display: flow-root; /* 创建新的BFC，阻止内部margin与外部折叠 */
}4. 使用 flex、grid 或 table 容器
Flexbox 和 Grid 布局中的子元素不会与其父元素发生margin collapse。例如：
.container {
display: flex;
flex-direction: column;
}此时子元素的margin不会再与父容器折叠。
实际开发中的建议
在日常开发中，如果频繁遇到margin collapse导致布局错乱，可以考虑：
- 统一使用padding来控制容器内间距
- 在组件外层使用flex或grid布局容器
- 避免完全依赖单个元素的margin进行整体布局定位
基本上就这些。虽然margin collapse是CSS的正常行为，但通过合理布局结构和现代CSS特性，完全可以规避其带来的困扰。关键是理解它发生的条件，并选择合适的防御策略。
