一、什么是外边距合并
处于同个BFC中的常规文档流（浮动和绝对定位不算）的块级元素，若之间没有空隙或padding、border隔开，他们将发生垂直方向上的外边距（margin）合并。
而且发生外边距最主要原因是两个元素的margin碰到了一起（有些博客称为相邻或邻接），一般有以下几种情况：
- 父子关系的合并
正常文本流中的父元素和子元素，若父元素没有padding和border隔开（子元素无所谓，子元素就算设置了padding/border父元素没设置，margin还是碰到一起），他们的外边距将发生合并。
父子外边距合并
- 兄弟关系的合并
同个BFC中，两个正常流的兄弟元素会发生外边距合并。
兄弟外边距合并
- 元素自身的合并
当元素自身没有内容，且没有设置border和padding时，他的上下外边距就会碰到一起，从而发生合并。
自身外部距合并
二、外边距合并规则
- 两个外边距都是正或负数时，折叠结果是两者绝对值之间较大的值，符号不变。
- 两个外边距一正一负时，折叠结果是两者的相加的和。
三、如何阻止外边距合并
文章开头我们就讲了发生外边距合并的条件:
处于同个BFC中的常规文档流（浮动和绝对定位不算）的块级元素，若之间没有空隙或padding、border隔开，他们将发生垂直方向上的外边距（margin）合并。
所以要想解决外边距合并问题，我们可以让上面加粗的四个点随意一个不满足即可，所以有以下四种解决方案（此处以解决父子关系边距合并为例）：
- 让两者处于不同BFC下：此处让父元素变成BFC，原先父子同处于根元素这个BFC下，所以才能发生合并，当父元素触发了BFC后，则子元素在新的BFC下，父元素仍然在根元素的BFC下，所以不在同个BFC中，也就无所谓合并了。
父元素变成BFC解决边距合并
- 让两者其中之一脱离常规文档流，可以设置浮动或者绝对定位
脱离文档流解决边距合并
- 让两者（此处是父元素或子元素）其中之一变成非块级元素：因为发生margin合并的条件之一是必须是块元素，所以当两者随意一个变成inline-block之后就没法合并了（对inline元素设置margin-top和margin-bottom本身就不生效，也就没有垂直方向上合并这么一说了）。
变成非块级解决margin合并
- 给父元素设置padding或者border分开他们的margin：
padding、border解决边距合并
同理，解决元素自身的边距合并也可以用上面的四种方法（实际2.3也会触发1）:
- 让自身触发BFC。
- 让自身脱离文本流。
- 变成inline-block。
- 给自身设置border或padding。
对于兄弟外边距合并，一般用以下三种：
- 让两者不在同个BFC下。
- 让自身脱离文本流。
- 变成inline-block。
之所以少了一种，是因为即使设置了padding或border他们的margin还是会碰在一起。所以又回到开头那句（手动滑稽脸～）：
发生外边距最主要原因是两个元素的margin碰到了一起。
