摘要：即我們常說的脫離文檔流的元素。如果一個(gè)元素不是流外的，即仍在文檔流中的元素，就叫流內(nèi)元素。兩個(gè)兄弟盒之間的豎直距離由屬性決定。同一個(gè)塊格式化上下文中的相鄰塊級(jí)盒之間的豎直會(huì)合并。如果盒的和相鄰，那么可能會(huì)被徹底合并。

- 流內(nèi)元素?
如果一個(gè)元素是浮動(dòng)的，絕對(duì)定位的或者是根元素，那么它就是流外元素。即我們常說的脫離文檔流的元素。如果一個(gè)元素不是流外的，即仍在文檔流中的元素，就叫流內(nèi)元素。
- 流內(nèi)塊級(jí)盒?
流內(nèi)塊級(jí)盒，就是流內(nèi)塊級(jí)元素生成的一個(gè)盒。
- 什么是格式化上下文？
常規(guī)流中的盒屬于一個(gè)格式化上下文，可能是塊或是內(nèi)聯(lián)，但不能都是（既是塊又是內(nèi)聯(lián)）。塊級(jí)盒參與塊格式化上下文。內(nèi)聯(lián)級(jí)盒參與內(nèi)聯(lián)格式化上下文 。在一個(gè)塊格式化上下文中，盒在豎直方向一個(gè)接一個(gè)地放置，從包含塊的頂部開始。兩個(gè)兄弟盒之間的豎直距離由margin屬性決定。同一個(gè)塊格式化上下文中的相鄰塊級(jí)盒之間的豎直margin會(huì)合并。
新建塊級(jí)格式化上下文（BFC)的條件：

浮動(dòng)元素，float除了none以外的值。

絕對(duì)定位元素，position(absolute,fixed)

display 為以下其中之一的值 inline-blocks，table-cells，table-captions

overflow 除了 visible 以外的值（hidden，auto，scroll）

注意："display:table" 本身并不產(chǎn)生 BFC，而是由它產(chǎn)生匿名框，匿名框中包含 "display:table-cell" 的框會(huì)產(chǎn) BFC。

- 行盒（line box）
在一個(gè)行內(nèi)格式化上下文中，盒是一個(gè)接一個(gè)水平放置的，從包含塊的頂部開始。這些盒之間的水平margin，border和padding都有效。盒可能以不同的方式豎直對(duì)齊：以它們的底部或者頂部對(duì)齊，或者以它們里面的文本的基線對(duì)齊。包含來(lái)自同一行的盒的矩形區(qū)域叫做行盒
- 相鄰的margin?
兩個(gè)margin是相鄰的，當(dāng)且僅當(dāng)：

都屬于流內(nèi)塊級(jí)盒，處于同一個(gè)塊格式化上下文。

沒有行盒（line box），沒有空隙，沒有padding并且沒有border把它們隔開（注意，因此某些0高度行盒）

都屬于豎直相鄰盒邊（vertically-adjacent box edges），即來(lái)自下列某一對(duì)：

* 一個(gè)盒的top margin和它的第一個(gè)流內(nèi)子級(jí)的top margin
* 一個(gè)盒的bottom margin和它的下一個(gè)流內(nèi)后面的兄弟（its next in-flow following sibling）的top margin
* 最后一個(gè)流內(nèi)子級(jí)的bottom margin和它的父級(jí)的bottom margin，如果父級(jí)的高度的計(jì)算值為"auto"
* 一個(gè)盒的top和bottom margin，該盒沒有建立一個(gè)新的塊格式化上下文并且min-height的計(jì)算值為0，height的計(jì)算值為0或者"auto"，并且沒有流內(nèi)子級(jí)

如果一個(gè)margin的任何部分margin與另一個(gè)margin相鄰的話，就認(rèn)為它與那個(gè)margin相鄰，是合并（collapsed）margin。

???????在CSS中，兩個(gè)或者多個(gè)盒（可能但不一定是兄弟）的相鄰的margin會(huì)被結(jié)合成一個(gè)margin。Margin按這種方式結(jié)合叫合并（collapse），產(chǎn)生的結(jié)合的margin叫做合并margin。

相鄰的豎直margin會(huì)合并，除了：

根元素的盒的margin不合并

如果一個(gè)有空隙（clearance）的元素的top和bottom margin是相鄰的，它的margin會(huì)與緊跟著的兄弟的相鄰margin合并，但產(chǎn)生的margin不會(huì)與父級(jí)塊的bottom margin合并

水平margin不會(huì)合并

合并的計(jì)算規(guī)則

當(dāng)兩個(gè)或者更多的margin合并時(shí)，產(chǎn)生的margin寬度為合并margin寬度中的最大值。

至于負(fù)margin，就從正相鄰margin的最大值中減去負(fù)相鄰margin的絕對(duì)值的最大值。

如果沒有正margin，就用0減去相鄰margin的絕對(duì)值的最大值

所以綜上所述，只要兩個(gè)margin被隔開了，就一定不會(huì)發(fā)生margin重疊?？梢允巧舷耣order隔開，可以是被上下padding隔開，也可以是被高度隔開，可以是被流內(nèi)子級(jí)隔開，可以被空隙（空隙的產(chǎn)生與clear有關(guān)）隔開，可以被新建立的格式化上下文隔開。

以下是css2.1規(guī)范的總結(jié)

一個(gè)浮動(dòng)的盒與任何其它盒之間的margin不會(huì)合并（甚至一個(gè)浮動(dòng)盒與它的流內(nèi)子級(jí)之間也不會(huì)）任何浮動(dòng)的、絕對(duì)定位的盒子不會(huì)與任何其他盒子的margin合并(原因：它們是流外塊級(jí)盒）。

建立了新的塊格式化上下文的元素（例如，浮動(dòng)盒與overflow不為"visible"的元素）的margin不會(huì)與它們的流內(nèi)子級(jí)合并。（原因：不在同一個(gè)塊級(jí)格式化上下文）

絕對(duì)定位的盒的margin不會(huì)合并（甚至與它們的流內(nèi)子級(jí)也不會(huì)）把絕對(duì)定位的盒子比作飛起來(lái)的盒子，那么這兩個(gè)飛起來(lái)的盒子，一定處于不同高度，因此，不管這個(gè)盒子如何移動(dòng)，都不會(huì)影響任何一個(gè)飛起來(lái)的盒子。

內(nèi)聯(lián)盒的margin不會(huì)合并（甚至與它們的流內(nèi)子級(jí)也不會(huì)）

一個(gè)流內(nèi)塊級(jí)元素的bottom margin總會(huì)與它的下一個(gè)流內(nèi)塊級(jí)兄弟的top margin合并，除非兄弟有空隙

一個(gè)流內(nèi)塊級(jí)元素的top margin會(huì)與它的第一個(gè)流內(nèi)塊級(jí)子級(jí)的top margin合并，如果該元素沒有top border，沒有top padding并且該子級(jí)沒有空隙

一個(gè)"height"為"auto"并且"min-height"為0的流內(nèi)塊級(jí)盒的bottom margin會(huì)與它的最后一個(gè)流內(nèi)塊級(jí)子級(jí)的bottom margin合并，如果該盒沒有bottom padding并且沒有bottom border并且子級(jí)的bottom margin不與有空隙的top margin合并

盒自身的margin也會(huì)合并，如果"min-height"屬性為0，并且既沒有top或者bottom border也沒有top或者bottom padding，并且其"height"為0或者"auto"，并且不含行盒，并且其所有流內(nèi)子級(jí)的margin（如果有的話）都合并了。

如果盒的top和bottom margin相鄰，那么可能會(huì)被徹底合并（collapse through）

margin。此時(shí)，元素的位置取決于與其它margin被合并了的元素的關(guān)系

如果該元素的margin與其父級(jí)的top margin合并了，盒的top border邊被定義為與其父級(jí)的相同

否則，要么該元素的父級(jí)沒有參與margin合并，要么只涉及其父級(jí)的bottom margin。如果該元素的bottom border不為0的話，其top border邊的位置將正常顯示（the same as it would have been）。
注意，已被徹底合并了的元素的位置不影響其它margin被合并的元素的位置，只有在布局這些元素的后代時(shí)，才需要top border邊的位置。

整理自css2.1規(guī)范：[http://www.ayqy.net/doc/css2-...]
以及：[http://www.jianshu.com/p/52a2...]