BFC和Margin Collapse

BFC：

浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不爲「visiable」的塊級盒子，都會爲他們的內容建立新的BFC（塊級格式上下文）。

在BFC中，盒子從頂端開始垂直地一個接一個地排列，兩個盒子之間的垂直的間隙是由他們的margin 值所決定的。在一個BFC中，兩個相鄰的塊級盒子的垂直外邊距會產生摺疊。

在BFC中，每個盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣(border-left)（對於從右到左的格式來講，則觸碰到右邊緣）。

合併外邊距與BFC ：

摺疊的結果：

1.  兩個相鄰的外邊距都是正數時，摺疊結果是它們二者之間較大的值。
2.  兩個相鄰的外邊距都是負數時，摺疊結果是二者絕對值的較大值。
3.  兩個外邊距一正一負時，摺疊結果是二者的相加的和。

產生摺疊的必備條件：margin必須是鄰接的!

而根據w3c規範，兩個margin是鄰接的必須知足如下條件：

•  必須是處於常規文檔流（非float和絕對定位）的塊級盒子,而且處於同一個BFC當中。
•  沒有線盒，沒有空隙（clearance，下面會講到），沒有padding和border將他們分隔開
•  都屬於垂直方向上相鄰的外邊距，能夠是下面任意一種狀況
  •  元素的margin-top與其第一個常規文檔流的子元素的margin-top
  •  元素的margin-bottom與其下一個常規文檔流的兄弟元素的margin-top
  •  height爲auto的元素的margin-bottom與其最後一個常規文檔流的子元素的margin-bottom
  •  高度爲0而且最小高度也爲0，不包含常規文檔流的子元素，而且自身沒有創建新的BFC的元素的margin-top和margin-bottom

以上的條件意味着下列的規則：

•  建立了新的BFC的元素（例如浮動元素或者'overflow'值爲'visible'之外的元素）與它的子元素的外邊距不會摺疊
•  浮動元素不與任何元素的外邊距產生摺疊（包括其父元素和子元素）
•  絕對定位元素不與任何元素的外邊距產生摺疊
•  inline-block元素不與任何元素的外邊距產生摺疊
•  一個常規文檔流元素的margin-bottom與它下一個常規文檔流的兄弟元素的margin-top會產生摺疊，除非它們之間存在間隙（clearance）。
•  一個常規文檔流元素的margin-top 與其第一個常規文檔流的子元素的margin-top產生摺疊，條件爲父元素不包含 padding 和 border ，子元素不包含 clearance。
•  一個 'height' 爲 'auto' 而且 'min-height' 爲 '0'的常規文檔流元素的 margin-bottom 會與其最後一個常規文檔流子元素的 margin-bottom 摺疊，條件爲父元素不包含 padding 和 border ，子元素的 margin-bottom 不與包含 clearance 的 margin-top 摺疊。
•  一個不包含border-top、border-bottom、padding-top、padding-bottom的常規文檔流元素，而且其 'height' 爲 0 或 'auto'， 'min-height' 爲 '0'，其裏面也不包含行盒(line box)，其自身的 margin-top 和 margin-bottom 會摺疊。

防止Margin摺疊:

如上所說： 1. 只有文檔流中的塊級元素會發生Margin摺疊 所以可經過將元素從文檔流中去除，或者display設爲inline-block的方式，防止其與兄弟節點發生margin摺疊。 2. 建立BFC的元素，不會與子元素髮生margin摺疊 所以可經過觸發元素的BFC，來防止它與本身的子元素髮生Margin摺疊 3. 當元素之間產生間隙時，可能不會發生margin摺疊 所以可經過padding,border來製造間隙，以防止margin摺疊