如何解决 margin“塌陷”？

外边距塌陷共有两种情况：

第一种情况：

两个同级元素，垂直排列，上面的盒子给 margin-bottom 下面的盒子给 margin-top，那么他们两个的间距会重叠，以大的那个计算。

解决这种情况 的方法为：两个外边距不同时出现

第二种情况：

两个父子元素，内部的盒子给 margin-top，其父级也会受到影响，同时产生 上边距，父子元素会进行粘连，决绝这种情况的方法为：父级添加一个 css 属性，overflow： hidden，禁止超出

外边距重叠就是 margin-collapse

解决方案：

1、为父盒子设置 border，为外层添加 border 后父子盒子就不是真正意义上的贴合（可 以设置成透明：border：1px solid transparent）；

2、为父盒子添加 overflow：hidden；

3、为父盒子设定 padding 值；

4、为父盒子添加 position：fixed；

5、为父盒子添加 display：table；

6、利用伪元素给父元素的前面添加一个空元素

.father::before {
    content:'';
    display:table;
}