外边距塌陷共有两种情况：
第一种情况：
两个同级元素，垂直排列，上面的盒子给 margin-bottom 下面的盒子给margin-top，那么他们两个的间距会重叠，以大的那个计算。
解决这种情况的方法为：两个外边距不同时出现
第二种情况：
两个父子元素，内部的盒子给 margin-top，其父级也会受到影响，同时产生上边距，父子元素会进行粘连。
解决方案：
1、为父盒子设置 border，添加 border 后父子盒子就不是真正意义上的贴合（可以设置成透
明：border：1px solid transparent）；
2、为父盒子添加 overflow：hidden；
3、为父盒子设定 padding 值；
4、为父盒子添加 position：fixed；
5、为父盒子添加 display：table；
6、利用伪元素给父元素的前面添加一个空元素
.father::before { content:''; display:table; }其他
在CSS中，margin“塌陷”是指元素的margin属性设置过高，导致它们超出其容器的边界。这会影响布局和可访问性。下面是几种可以避免或解决margin塌陷问题的方法：
使用box-sizing属性：
将元素的box-sizing属性设置为border-box，这将确保元素的宽度和高度包括在元素的内容中，而不是额外的margin。例如：
.box {
box-sizing: border-box;
}合理设置margin属性：
将元素的margin设置为恰当的值，可以避免margin塌陷问题。通常情况下，我们可以将margin设置为较小的值，并在需要时根据需要调整它们。例如：
.box {
margin: 20px;
}合理设置盒模型：
在某些情况下，将元素的盒模型设置为object，这可以消除某些CSS盒模型带来的margin塌陷问题。例如：
.box {
width: 200px;
height: 200px;
border: 1px solid black;
display: inline-block;
overflow: hidden;
}
.box.object {
margin: 0;
}调整元素的位置：
通过调整元素的位置，可以避免margin塌陷问题。例如：
.box {
position: relative;
}
.box:before,
.box:after {
content: '';
display: inline-block;
}
.box:before {
position: absolute;
top: -20px; /\* 或者根据需要调整 \*/
left: 0; /\* 或者根据需要调整 \*/
right: 0; /\* 或者根据需要调整 \*/
bottom: 0; /\* 或者根据需要调整 \*/
}
.box:after {
content: '';
position: absolute;
top: 0; /\* 或者根据需要调整 \*/
left: 20px; /\* 或者根据需要调整 \*/
right: 0; /\* 或者根据需要调整 \*/
}
