一、什么是外邊距合并
處于同個BFC中的常規(guī)文檔流（浮動和絕對定位不算）的塊級元素坛缕，若之間沒有空隙或padding墓猎、border隔開，他們將發(fā)生垂直方向上的外邊距（margin）合并赚楚。
而且發(fā)生外邊距最主要原因是兩個元素的margin碰到了一起（有些博客稱為相鄰或鄰接）毙沾，一般有以下幾種情況：
- 父子關(guān)系的合并
正常文本流中的父元素和子元素，若父元素沒有padding和border隔開（子元素?zé)o所謂宠页，子元素就算設(shè)置了padding/border父元素沒設(shè)置左胞，margin還是碰到一起）寇仓，他們的外邊距將發(fā)生合并。
父子外邊距合并
- 兄弟關(guān)系的合并
同個BFC中烤宙，兩個正常流的兄弟元素會發(fā)生外邊距合并遍烦。
兄弟外邊距合并
- 元素自身的合并
當(dāng)元素自身沒有內(nèi)容，且沒有設(shè)置border和padding時门烂，他的上下外邊距就會碰到一起乳愉，從而發(fā)生合并。
自身外部距合并
二屯远、外邊距合并規(guī)則
- 兩個外邊距都是正或負數(shù)時蔓姚，折疊結(jié)果是兩者絕對值之間較大的值，符號不變慨丐。
- 兩個外邊距一正一負時坡脐，折疊結(jié)果是兩者的相加的和。
三房揭、如何阻止外邊距合并
文章開頭我們就講了發(fā)生外邊距合并的條件:
處于同個BFC中的常規(guī)文檔流（浮動和絕對定位不算）的塊級元素备闲，若之間沒有空隙或padding、border隔開捅暴，他們將發(fā)生垂直方向上的外邊距（margin）合并恬砂。
所以要想解決外邊距合并問題，我們可以讓上面加粗的四個點隨意一個不滿足即可蓬痒，所以有以下四種解決方案（此處以解決父子關(guān)系邊距合并為例）：
- 讓兩者處于不同BFC下：此處讓父元素變成BFC泻骤，原先父子同處于根元素這個BFC下，所以才能發(fā)生合并梧奢，當(dāng)父元素觸發(fā)了BFC后狱掂，則子元素在新的BFC下，父元素仍然在根元素的BFC下亲轨，所以不在同個BFC中趋惨，也就無所謂合并了。
父元素變成BFC解決邊距合并
- 讓兩者其中之一脫離常規(guī)文檔流惦蚊，可以設(shè)置浮動或者絕對定位
脫離文檔流解決邊距合并
- 讓兩者（此處是父元素或子元素）其中之一變成非塊級元素：因為發(fā)生margin合并的條件之一是必須是塊元素器虾，所以當(dāng)兩者隨意一個變成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碰到了一起属瓣。
