一、什么是外邊距合并
處于同個BFC中的常規(guī)文檔流（浮動和絕對定位不算）的塊級元素，若之間沒有空隙或padding、border隔開，他們將發(fā)生垂直方向上的外邊距（margin）合并。
而且發(fā)生外邊距最主要原因是兩個元素的margin碰到了一起（有些博客稱為相鄰或鄰接），一般有以下幾種情況：
- 父子關(guān)系的合并
正常文本流中的父元素和子元素，若父元素沒有padding和border隔開（子元素?zé)o所謂，子元素就算設(shè)置了padding/border父元素沒設(shè)置，margin還是碰到一起），他們的外邊距將發(fā)生合并。
父子外邊距合并
- 兄弟關(guān)系的合并
同個BFC中，兩個正常流的兄弟元素會發(fā)生外邊距合并。
兄弟外邊距合并
- 元素自身的合并
當元素自身沒有內(nèi)容，且沒有設(shè)置border和padding時，他的上下外邊距就會碰到一起，從而發(fā)生合并。
自身外部距合并
二、外邊距合并規(guī)則
- 兩個外邊距都是正或負數(shù)時，折疊結(jié)果是兩者絕對值之間較大的值，符號不變。
- 兩個外邊距一正一負時，折疊結(jié)果是兩者的相加的和。
三、如何阻止外邊距合并
文章開頭我們就講了發(fā)生外邊距合并的條件:
處于同個BFC中的常規(guī)文檔流（浮動和絕對定位不算）的塊級元素，若之間沒有空隙或padding、border隔開，他們將發(fā)生垂直方向上的外邊距（margin）合并。
所以要想解決外邊距合并問題，我們可以讓上面加粗的四個點隨意一個不滿足即可，所以有以下四種解決方案（此處以解決父子關(guān)系邊距合并為例）：
- 讓兩者處于不同BFC下：此處讓父元素變成BFC，原先父子同處于根元素這個BFC下，所以才能發(fā)生合并，當父元素觸發(fā)了BFC后，則子元素在新的BFC下，父元素仍然在根元素的BFC下，所以不在同個BFC中，也就無所謂合并了。
父元素變成BFC解決邊距合并
- 讓兩者其中之一脫離常規(guī)文檔流，可以設(shè)置浮動或者絕對定位
脫離文檔流解決邊距合并
- 讓兩者（此處是父元素或子元素）其中之一變成非塊級元素：因為發(fā)生margin合并的條件之一是必須是塊元素，所以當兩者隨意一個變成inline-block之后就沒法合并了（對inline元素設(shè)置margin-top和margin-bottom本身就不生效，也就沒有垂直方向上合并這么一說了）。
變成非塊級解決margin合并
- 給父元素設(shè)置padding或者border分開他們的margin：
padding、border解決邊距合并
同理，解決元素自身的邊距合并也可以用上面的四種方法（實際2.3也會觸發(fā)1）:
- 讓自身觸發(fā)BFC。
- 讓自身脫離文本流。
- 變成inline-block。
- 給自身設(shè)置border或padding。
對于兄弟外邊距合并，一般用以下三種：
- 讓兩者不在同個BFC下。
- 讓自身脫離文本流。
- 變成inline-block。
之所以少了一種，是因為即使設(shè)置了padding或border他們的margin還是會碰在一起。所以又回到開頭那句（手動滑稽臉～）：
發(fā)生外邊距最主要原因是兩個元素的margin碰到了一起。
