合并外边距的场景：
- 相邻的两个元素之间的上下边距
- 父元素与其第一个或最后一个子元素之间
- 空块元素自身的上下边距
相邻元素
当两个元素上下相邻时，上面的下外边距会与下面元素的上外边距会合并。
image.png
注意：如果元素左右相邻，是不会合并外边距的，因为行内元素不合并外边距；
父子元素
父子元素如果都有上边距，会合并为其中较大的那一个。
image.png
空块元素
如果一个块级元素中不包含任何内容，并且在其 margin-top 与 margin-bottom 之间没有边框、内边距、行内内容、height、min-height 将两者分开，则该元素的上下外边距会折叠。
image.png
如果这个外边距遇到另一个元素的外边距，它还会发生合并：
image.png
如何不让相邻元素外边距合并？
- 在其中添加一个空的div，阻止他们在同一个BFC
- 处于静态流的元素会发生合并，所以设置 float 和 position:xxx都不会发合并
- 设置为 inline-block 也不会发生合并
父子元素外边距合并示例：
合并边距004.png
合并边距001.png
合并边距002.png
通过示例可以看到，父元素的下边距与子元素的下边距发生了合并，合并为较大的100px；
