如何解决margin塌陷以及margin合并

什么是外边距合并，以及常见的几种情况

外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。
所谓的外边距合并就是，当两个垂直外边距相遇时，它们将形成一个外边距。合并的外边距的高度等于两个发生合并的外边距的高度中的较大者。

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

• 两个元素是兄弟关系：
  
• .两个元素是父子关系（没有内边距或边框把外边距分割开）：
  
• 一个空元素，没有边框和填充
  
  如果这个外边距遇到另一个元素的外边距，还会发生合并：
  
  注释：只有普通文档流中块级元素（block）的垂直外边距才会发生外边距合并。行内框，浮动框或绝对定位之间的外边距不会合并。

解决方法
兄弟元素：
可以直接改变其中一个的外边距的值，使之达到想要的效果。(推荐使用)

BFC解决办法：将兄弟元素分别作为子元素放在块级元素内，然后将其父级元素的渲染规则该为BFC。(不推荐使用,会破坏HTML文档结构)

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

使用BFC解决: 将父元素的渲染模式改为BFC渲染模式.

<div style="margin: 20px;background:pink;">margin: 20px</div>
<!--父元素-->
<div style="margin: 20px;background: blue">
    <!--子元素-->
    <div style="margin: 30px;background:pink;">margin: 30px</div>
</div>

    <div style="margin: 20px;background:pink;">margin: 20px</div>
    <!--父元素,触发bfc-->
    <div style="margin: 20px;background: blue;
    overflow: hidden;">
    <!--子元素-->
    <div style="margin: 30px;background:pink;">margin: 30px</div>
    </div>

---

BFC是什么,如何触发BFC.

FC

Formatting context(格式化上下文)是W3C 规范中的一个概念.
它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素如何定位,以及和其他元素的关系和相互作用.

BFC

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)