CSS中塌陷问题的产生原理及解决办法

塌陷问题的产生主要分为两种情况
1 两个兄弟元素之间的margin塌陷
2父子元素间的margin塌陷

兄弟元素margin’塌陷
为文档流中居于上下排列的两个兄弟盒子分别设置为margin-bottom：50px；，下面盒子为margin-top：40px；
我们的初衷是把俩两个盒子的之间的间隙设置为40+50=90px
但是系统默认把取间隙最大的显示，这就导致了下方的盒子Margi**塌陷。

父子元素margin塌陷**
给子元素设置margin后，初衷是让子元素在父元素中有一定的margin。运行结果发现，子元素和父元素的margin合并在了一起，子元素的margin直接传递给父元素，margin变成了父元素相对于当前窗口的margin，而不是子元素相对于父元素的margin。

margin塌陷的解决方法。
（1）为父盒子设置border，为外层添加border后父子盒子就不是真正意义上的贴合 （可以设置成透明：border：1px solid transparent）。
（2）为父盒子添加overflow：hidden；
（3）为父盒子设定padding值；
（4）为父盒子添加position：fixed；
（5）为父盒子添加 display：table；
（6）利用伪元素给子元素的前面添加一个空元素
给子元素son添加一个兄弟元素属性为content:" ";overflow: hidden;