首先明確邊距合并是個什么問題。
舉例說明：
什么叫邊距合并
總結(jié)邊距合并的三種情況（上圖都已經(jīng)有體現(xiàn)了）：
- 當子元素和父元素垂直之間沒有
padding、沒有border也沒有內(nèi)容時就會發(fā)生外邊距合并，總體外邊距變?yōu)閮蓚€外邊距中的較大者 - 相鄰兄弟元素的垂直上下之間也會出現(xiàn)外邊距合并；
- 一個元素內(nèi)部沒有內(nèi)容、沒有
border、也沒有padding會發(fā)生外邊距合并；
題外話：為什么發(fā)生邊距合并？
首先要明白html最初設(shè)計目的是和一個文本文檔一樣，默認也是大家在里面寫文章放圖片，那么自然要換行，所以這個margin就是控制行間距的。自然很多情況下要智能地邊距合并才能符合使用者的本意。所以不要怪罪瀏覽器的解析方式。
不感興趣的就只看這句話：邊距合并是個排版問題。
好了，重點是怎么解決邊距合并問題。
比較通用的方法是使用BFC。解釋一下BFC是啥：
BFC是塊級元素自身形成獨立的上下文排版的方式，形成BFC后外部floating、clear這些排版就失效了，BFC內(nèi)部自己形成一個內(nèi)部空間
形成BFC的方式，為了防止誤解直接給出MDN上的原文：
A block formatting context is created by one of the following:
- the root element or something that contains it
- floats (elements where float is not none)
- absolutely positioned elements (elements where position is absolute or fixed)
- inline-blocks (elements with display: inline-block)
- table cells (elements with display: table-cell, which is the default for HTML table cells)
- table captions (elements with display: table-caption, which is the default for HTML table captions)
- elements where overflow has a value other than visible
- flex boxes (elements with display: flex or inline-flex)
言歸正傳，我們解決邊距合并問題不是用上面隨便一條形成bfc就可以的。比如第1條，稍微思考一下就知道和解決我們的問題沒關(guān)系。靠譜的是我們利用overflow設(shè)置一個屬性（當然不能設(shè)置visiable上面已經(jīng)說了）。
要說明三個重要問題：
- 是父元素形成BFC才起作用，BFC外部和內(nèi)部的排版時隔絕的，也就是我們要解決的排版問題
- BFC不是專門用來解決邊距合并的，自然會有副作用，還要自己思考最佳解決方案
- 有的時候想一下到底是要
margin還是padding
