margin塌陷是CSS布局中典型的外边距合并问题，主要分为父子元素margin塌陷和相邻兄弟元素margin塌陷两种场景，两种场景的触发条件和解决逻辑存在一定差异，需要针对性处理。
什么是margin塌陷
margin塌陷指的是在特定布局规则下，两个或多个相邻元素的外边距会发生合并，最终显示的外边距取其中较大的那个值，而不是多个外边距的叠加，这种不符合直觉的表现就是margin塌陷。常见的触发场景有两种：
- 父子元素之间：当父元素没有设置边框、内边距或者触发特定格式化上下文时，子元素的上下外边距会和父元素的上下外边距合并。
- 相邻兄弟元素之间：两个垂直方向相邻的块级元素，上元素的下外边距和下元素的上外边距会发生合并。
父子元素margin塌陷的解决方法
父子元素margin塌陷的核心原因是父元素没有形成独立的块级格式化上下文（BFC），或者没有物理边界隔离子元素的外边距，以下是几种常用解决方式：
1. 给父元素设置边框
给父元素添加任意宽度的边框，就可以隔离子元素的外边距，避免塌陷。示例代码如下：
/* 父元素添加边框，边框颜色可以设为透明不影响视觉效果 */
.parent {
border: 1px solid transparent;
}
.child {
margin-top: 20px;
}
2. 给父元素设置内边距
给父元素添加内边距，同样可以隔离子元素的外边距，避免合并。示例代码如下：
.parent {
padding-top: 1px; /* 最小的内边距即可生效 */
}
.child {
margin-top: 20px;
}
3. 触发父元素的BFC
触发BFC后，父元素会形成独立的渲染区域，内部元素的外边距不会和外部元素合并。常用的触发BFC的方式有设置overflow为非visible、设置float、设置position为absolute或fixed等。示例代码如下：
/* 常用overflow: hidden触发BFC，副作用较小 */
.parent {
overflow: hidden;
}
.child {
margin-top: 20px;
}
4. 父元素设置display: flow-root
display: flow-root是专门用来触发BFC的属性，不会产生其他额外的副作用，是更推荐的解决方式。示例代码如下：
.parent {
display: flow-root;
}
.child {
margin-top: 20px;
}
相邻兄弟元素margin塌陷的解决方法
相邻兄弟元素的margin塌陷是CSS规范定义的默认行为，如果不需要合并效果，可以通过以下方式处理：
1. 给其中一个元素添加方向相反的margin
如果希望两个元素之间的间距是30px，两个元素原本分别设置margin-bottom:20px和margin-top:20px会合并为20px，此时可以调整其中一个的margin值。示例代码如下：
.box1 {
margin-bottom: 30px;
}
.box2 {
margin-top: 0;
}
2. 用padding替代margin
给其中一个元素使用padding代替margin，因为padding不会触发合并规则。示例代码如下：
.box1 {
padding-bottom: 30px;
}
.box2 {
margin-top: 0;
}
3. 让其中一个元素触发BFC
给其中一个兄弟元素触发BFC，也可以避免两个元素的外边距合并。示例代码如下：
.box1 {
margin-bottom: 20px;
}
.box2 {
margin-top: 20px;
display: flow-root;
}
不同场景的方案选择建议
如果是父子元素塌陷，优先选择display: flow-root或者overflow: hidden触发BFC，这两种方式不会影响元素的原有盒模型尺寸；如果是相邻兄弟元素塌陷，优先调整margin值或者改用padding，避免不必要的BFC触发导致布局出现其他问题。实际开发中可以根据具体的布局需求选择最合适的方案，不需要固定使用某一种方法。