解决margin塌陷问题？

1.理解什么是margin塌陷

先看一个demo

效果图如下

给parent1加上

margin-top: 20px;

下面橙色区域是margin-top，此时是相对于body的（其实body也有默认margin，为8，此时取body和parent1的最大值，这为margin合并）

接下来给parent2加上

margin-top:20px;

parent2相对于parent1整体向下滑动20px，parent1不变化；

接下来，我们把children1加上

margin-top:8px；

我们可以看到1和3处没有变化，只有2处向下移动8px；从上面的列子可以看到，parent1的margin是相对于body的，而parent2的margin是相对于parent1的，chidren1的margin是相对于body的，chidren2的margin是相对于chidren2的，chidren2的margin是相对于parent1的。总而言之，body下的第一个元素和第一个元素下的第一个元素margin都是相对于body的（margin-top大于8px会出现margin塌陷），body下其他元素（包括其第一个子元素）则是margin相对于上一个元素，body下其他元素不包括第一个元素则是margin相对于上一个子元素。当出现第一个子元素margin大于默认值时（body默认8px，div没有默认值），子元素会带着父元素走动，这种现象就做margin塌陷。

2.解决margin塌陷问题

①给父元素加上overflow:hidden;
给parent1和parent2加上之后，margin-top:8px;出现了。

②为父盒子设置border，为外层添加border之后父子盒子就不是真正意义上的贴合了
可以看到设置border: 1px solid red;之后，同样达到效果

③为父元素设置paddin值
可以看到我给父元素设置了padding: 5px;之后，达到要求。

④设置position:fixed;
当给parent1设置了如下参数之后，达到效果。


⑤给父元素设置display:table;
给parent1设置了display:table;