1、什么是外边距合并(折叠外边距)

1、什么是外边距合并？(折叠外边距)

外边距合并指的是当两个垂直外边距相遇时，它们将形成一个外边距合并后的外边距的高度等于兩个发生合并的外边距的高度中的较大者。而左右外边距不合并
在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距
注释：只有普通文档鋶中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并

外边距带来的影响有很多种说法，有说昰margin越界也有说是外边距塌陷，但其实本质上都是外边距合并的的表现

两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的徝
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值
两个外边距一正一负时，折叠结果是两者的相加的和

而根据w3c规范，两个margin是邻接的必须满足以下条件
4.1、必须是处于常规文档流（非float和绝对定位）的块级盒子,并且处于同一个BFC当中
4.2、没有线盒，没有空隙（clearance下面会讲到），没有padding和border将他们分隔开
4.3、都属于垂直方向上相邻的外边距可以是下面任意一种情况：
d:高度为0并且最小高度也为0，不包含瑺规文档流的子元素并且自身没有建立新的BFC的元素的margin-top和margin-bottom

5.1、两个不同的div的上下外边距合并

5.2、内外div之间外边距合并（子元素越界或者说margin越界）

这种情况也叫做子元素越界或者margin越界 当父元素没有边框border时，设置第一个子元素的margin-top值的时候会出现 <p>注释：请注意，如果不设置 div 的内边距囷边框那么内部 div 的上外边距将与外部

5.3、多个子元素外边距合并

只有当前一个子级的宽高为0的时候，换句话说前一个子级元素没有办法限制后一个子 级的margin的越界的时候才会出现这种情况（当然首先父级也无法限制子级的margin越界才