Margin 纵向重叠（塌陷）问题和解决方法

Margin纵向塌陷现象：小的margin会塌陷到大的margin中，从而margin不叠加，只以大值为准。相邻元素的margin-top 和 margin-bottom 会发生重叠；空白内容的P标签、div标签等也会重叠。

解决方法：

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

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

3）为父盒子设定padding值；

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

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

6）利用伪元素给子元素的前面添加一个空元素

.son::before{ content:"";overflow:hidden; }