开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第25天，点击查看活动详情
一、如何解决 margin“塌陷”
外边距塌陷共有两种情况：
第一种情况：两个同级元素，垂直排列，上面的盒子给 margin-bottom 下面的盒子给 margintop，那么他们两个的间距会重叠，以大的那个计算。解决这种情况的方法为：两个外边距不同时出现。
第二种情况：两个父子元素，内部的盒子给 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）利用伪元素给子元素的前面添加一个空元素
.son:before{ content:"";overflow:hidden; }
二、什么是外边距重叠？重叠的结果是什么？
外边距重叠指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的高度如果都是正边界，边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。只有外边距才可以是负值，内边距不允许为负值。
在 CSS 中，相邻的两个盒子的外边距可以结合成一个单独的外边距，这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距
重叠情况：
1、两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值
2、两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值
3、两个外边距一正一负时，折叠结果是两者的相加的和
4、外边距不重叠的情况。
水平 margin 永远不会重合
设置了 overflow 属性(visible 除外)的元素和它的子元素之间的 margin 不会重叠
设置了绝对定位（position:absolute）的盒模型，垂直 margin 不会被重叠，和子元素之间也不重叠。
设置了 display:inline-block 的元素，垂直 margin 不会重叠，和子元素之间也不重叠根元素(如 html)与 body 的 margin 不会重叠
三、防止外边距重叠的方法
元素绝对定位 postion:absolute;一般用在内层元素
内层元素 加 float:left;或 display:inline-block
外层元素用 padding 增加边距
外层元素设置 overflow:hidden
内层元素透明边框 border:1px solid transparent
