外邊距合并##
塊級(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的較大者华蜒。
類(lèi)似的，若塊級(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)盈厘。
