外边距折叠现象
外边距折叠现象分为两种，一种是外边距合并现象，一种是塌陷现象。
①合并现象
合并现象出现的场景：
垂直布局的相邻的块级元素(兄弟元素)，上下的margin值会合并。
直接上代码看实例：
设置两个垂直布局的父盒子，然后设置box1的margin-bottom为200px和box2的margin-top为100px，按照实际情况，两个盒子之间的距离应当为300px，，但是实际效果却是200px。
代码如下：
页面如下：
想要解决外边距合并现象，有以下方法：
1.直接避免上下盒子同时设置上下边距，只给一个设置外边距即可。
2.给其中一个元素设置一个父盒子，再给父盒子触发BFC。
如下代码：
效果图如下：
②外边距塌陷现象
外边距塌陷的现象出现的场景：互相嵌套的块级元素（父子元素），子元素的margin-top会作用在父元素上，从而导致父元素一起往下移动。
直接上代码看实例：
设置两个互相嵌套的块级元素，给子元素设置margin-top，代码如下：
样式效果如下：
由图可知，给子元素设置margin-top:100px并没有使子盒子正常的向下位移100px，反而是让父盒子跟其一起移动了100px，这就是外边距塌陷。
解决外边距塌陷的办法：
1.给父盒子设置一个border。
2.给父盒子设置padding。
3.让父盒子触发BFC。
方法一：给父盒子设置border。
方法二：给父盒子设置padding。
方法三：给父盒子触发BFC。
外边距合并的计算
1.两个外边距都是正数或者负数，结果是绝对值最大的那个外边距。
2.外边距一正一负的情况，结果使最大的正边距和最小的负边距的和。
