外邊距合并##

塊級(jí)元素的 上外邊距（margin-top
） 與 下外邊距（margin-bottom
） 有時(shí)會(huì)合并（塌陷）為單個(gè)外邊距，這樣的現(xiàn)象稱之為 外邊距合并(塌陷)。

下面三種基本情形會(huì)出現(xiàn)外邊距塌陷：

毗鄰兄弟元素######

毗鄰的兩個(gè)兄弟元素之間的外邊距會(huì)塌陷（當(dāng)后者被 清除浮動(dòng) 時(shí)除外）。

<p style="margin-bottom: 30px;">這個(gè)段落的下外邊距被合并...</p>
<p style="margin-top: 20px;">...這個(gè)段落的上外邊距被合并。</p>

塊級(jí)父元素與其第一個(gè)/最后一個(gè)子元素######

如果塊級(jí)父元素中，不存在上邊框、上內(nèi)補(bǔ)、inline content、清除浮動(dòng)這四條屬性（對(duì)于上邊框和上內(nèi)補(bǔ)，也可以說(shuō)，當(dāng)上邊距及上內(nèi)補(bǔ)寬度為0時(shí)），那么這個(gè)塊級(jí)元素和其第一個(gè)子元素的上邊距就可以說(shuō)”挨到了一起“。此時(shí)這個(gè)塊級(jí)父元素和其第一個(gè)子元素就會(huì)發(fā)生上外邊距合并 現(xiàn)象，換句話說(shuō)，此時(shí)這個(gè)父元素對(duì)外展現(xiàn)出來(lái)的外邊距將直接變成這個(gè)父元素和其第一個(gè)子元素的margin-top的較大者。
類似的，若塊級(jí)父元素的 margin-bottom 與它的最后一個(gè)子元素的margin-bottom 之間沒(méi)有父元素的 border
、padding、inline content、height 分隔時(shí)，就會(huì)發(fā)生 下外邊距合并 現(xiàn)象。
空塊元素
如果存在一個(gè)空的塊級(jí)元素，其 border、padding
)、inline content、height、min-height 都不存在。那么此時(shí)它的上下邊距中間將沒(méi)有任何阻隔，此時(shí)它的上下外邊距將會(huì)合并。例如：

<div style="margin-top: 20px; margin-bottom: 20px;"></div>s

簡(jiǎn)單的說(shuō)：垂直方向上兩個(gè)相鄰的(在同一個(gè) 塊級(jí)格式化上下文 中) 外邊距 會(huì)發(fā)生合并，合并后的外邊距是兩者中的較大者。在負(fù)外邊距的情況下，合并后的外邊距為最大正外邊距與最小負(fù)外邊距之和。

BFC##

塊格式化上下文（block formatting context） 是頁(yè)面 CSS 視覺(jué)渲染(visual CSS rendering)這個(gè)過(guò)程中的一個(gè)概念。它是決定塊盒子的布局及浮動(dòng)元素相互影響的一個(gè)因素。

下列情況將創(chuàng)建一個(gè)塊格式化上下文：######

• 根元素或其它包含它的元素
• 浮動(dòng) (元素的 float 不為 none)
• 絕對(duì)定位元素 (元素的 position 為 absolute 或 fixed)
• 行內(nèi)塊 inline-blocks (元素的 display: inline-block)
• 表格單元格 (元素的 display: table-cell，HTML表格單元格默認(rèn)屬性)
• 表格標(biāo)題 (元素的 display: table-caption, HTML表格標(biāo)題默認(rèn)屬性)
• overflow 的值不為 visible的元素
• 彈性盒子 flex boxes (元素的 display: flex 或 inline-flex)

塊格式化上下文包括了創(chuàng)建該上下文的元素的所有子元素，但不包括創(chuàng)建了新的塊格式化上下文的子元素。

塊格式化上下文 對(duì) 定位 與 清除浮動(dòng) 很重要。定位和清除浮動(dòng)的樣式規(guī)則只適用于處于同一塊格式化上下文內(nèi)的元素。浮動(dòng)不會(huì)影響其它塊格式化上下文中元素的布局，并且清除浮動(dòng)只能清除 同一塊格式化上下文中 在它前面的元素的浮動(dòng)。