margin合并/塌陷问题

外边距合并的几种情况

所谓的外边距合并就是，当两个垂直外边距相遇时，它们将形成一个外边距。合并的外边距的高度等于两个发生合并的外边距的高度中的较大者。
注：只有普通文档流中块级元素（block）的垂直外边距才会发生外边距合并。行内框，浮动框或绝对定位之间的外边距不会合并。

发生合并的情况有以下几种：

1. 两个元素是兄弟关系：

   
   兄弟关系合并

2. 两个元素是父子关系（没有内边距或边框把外边距分割开）：

   
   父子关系合并
3. 一个空元素，没有边框和填充
   空元素合并
   如果这个外边距遇到另一个元素的外边距，还会发生合并
   连续合并

解决方法

• 兄弟关系合并

1. 可以直接改变其中一个的外边距的值，使之达到想要的效果。(推荐使用)
2. BFC解决办法：将兄弟元素分别作为子元素放在块级元素内，然后将其父级元素的渲染规则该为BFC。(不推荐使用,会破坏HTML文档结构)

• 父子关系合并

使用margin时，会出现另一个bug，这里称为margin塌陷（就是垂直方向的margin不但会合并; 当父元素没有设置内边距或边框,以及触发BFC时,如果子元素的值大于父元素时，它会带着父元素一起偏移,此时子元素是相对除了它父级之外的离它最近的元素偏移的）。

1. 可以通过给父元素添加边框或内边距.(不建议使用,会破坏布局，添加边框方法可以设置为透明色)
2. 使用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)

参考：https://blog.csdn.net/shi_1204/article/details/80180224