外边距合并的几种情况
所谓的外边距合并就是，当两个垂直外边距相遇时，它们将形成一个外边距。合并的外边距的高度等于两个发生合并的外边距的高度中的较大者。
注：只有普通文档流中块级元素（block）的垂直外边距才会发生外边距合并。行内框，浮动框或绝对定位之间的外边距不会合并。
发生合并的情况有以下几种：
-
两个元素是兄弟关系：
兄弟关系合并 -
两个元素是父子关系（没有内边距或边框把外边距分割开）：
父子关系合并 - 一个空元素，没有边框和填充
空元素合并
如果这个外边距遇到另一个元素的外边距，还会发生合并
连续合并
解决方法
- 兄弟关系合并
- 可以直接改变其中一个的外边距的值，使之达到想要的效果。(推荐使用)
- BFC解决办法：将兄弟元素分别作为子元素放在块级元素内，然后将其父级元素的渲染规则该为BFC。(不推荐使用,会破坏HTML文档结构)
- 父子关系合并
使用margin时，会出现另一个bug，这里称为margin塌陷（就是垂直方向的margin不但会合并; 当父元素没有设置内边距或边框,以及触发BFC时,如果子元素的值大于父元素时，它会带着父元素一起偏移,此时子元素是相对除了它父级之外的离它最近的元素偏移的）。
- 可以通过给父元素添加边框或内边距.(不建议使用,会破坏布局，添加边框方法可以设置为透明色)
- 使用BFC解决: 将父元素的渲染模式改为BFC渲染模式
BFC是什么,如何触发BFC
FC
Formatting context(格式化上下文)是W3C 规范中的一个概念。
它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素如何定位,以及和其他元素的关系和相互作用。
BFC
Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流。
具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
触发BFC
只要满足以下任意一条件,将会触发BFC：
- body根元素
- 浮动元素：float：除none以为的值
- 绝对定位元素：position：absolute/fixed
- display：inline-block/table-cells/flex
- overflow：除了visible以外的值（hidden/auto/scroll)
