什麼是外邊距合併，以及常見的幾種情況

外邊距合併（疊加）是一個相當簡單的概念。但是，在實踐中對網頁進行佈局時，它會造成許多混淆。
所謂的外邊距合併就是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合併的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。

發生合併的情況有以下幾種：

• 兩個元素是兄弟關係：
  
• .兩個元素是父子關係（沒有內邊距或邊框把外邊距分割開）：
  
• 一個空元素，沒有邊框和填充
  
  如果這個外邊距遇到另一個元素的外邊距，還會發生合併：
  
  註釋：只有普通文件流中塊級元素（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)