外边距塌陷有两种情况
情况一：
两个同级元素，处置排列，上面的盒子给margin-bottom,下面的盒子给margin-top,那么他们两个的间距会重叠，以最大的那个计算
例如：
<style>
.box-one{
width: 50px;
height: 50px;
background-color: #f40;
margin-bottom: 20px;
}
.box-two{
width: 50px;
height: 50px;
background-color: yellow;
margin-top:30px;
}
</style>
<body>
<ul>
<li class="box-one">11</li>
<li class="box-two">22</li>
</ul>
</body>
图1.jpg
最后两个盒子的间距不是50px，而是30px，取的是两个盒子中margin较大的一方
情况二：
两个父子元素，内部的盒子给margin-top,其父级也会受到影响，同时产生上边距，父子元素会进行粘连
例如：
<style>
.box-father{
background-color: #f40;
}
.box-son{
width: 50px;
height: 50px;
background-color: yellow;
margin-top:30px;
}
</style>
<body>
<div class="box-father">
<div class="box-son">22</div>
</div>
</body>
图二.jpg
解决办法：
1、为父盒子添加border,添加border属性后，父盒子就不是真正意义上的贴合，就会有一个边框了，所以可以给父盒子设置一个透明的边框
border:1px solid transparent
2、为父盒子添加overflow:hidden
3、为父盒子添加padding值
4、为父盒子添加display:table
5、为父盒子添加position:fixed
6、利用伪元素给父元素的前面添加一个空元素
.father::before{
content:'';
display:table
}
