首先明確邊距合并是個(gè)什么問題讲弄。
舉例說明：
什么叫邊距合并
總結(jié)邊距合并的三種情況（上圖都已經(jīng)有體現(xiàn)了）：
- 當(dāng)子元素和父元素垂直之間沒有
padding、沒有border也沒有內(nèi)容時(shí)就會發(fā)生外邊距合并蚓让，總體外邊距變?yōu)閮蓚€(gè)外邊距中的較大者 - 相鄰兄弟元素的垂直上下之間也會出現(xiàn)外邊距合并鹿寻；
- 一個(gè)元素內(nèi)部沒有內(nèi)容娱挨、沒有
border、也沒有padding會發(fā)生外邊距合并醉途；
題外話：為什么發(fā)生邊距合并矾瑰？
首先要明白html最初設(shè)計(jì)目的是和一個(gè)文本文檔一樣，默認(rèn)也是大家在里面寫文章放圖片隘擎，那么自然要換行殴穴，所以這個(gè)margin就是控制行間距的。自然很多情況下要智能地邊距合并才能符合使用者的本意货葬。所以不要怪罪瀏覽器的解析方式采幌。
不感興趣的就只看這句話：邊距合并是個(gè)排版問題。
好了震桶，重點(diǎn)是怎么解決邊距合并問題休傍。
比較通用的方法是使用BFC。解釋一下BFC是啥：
BFC是塊級元素自身形成獨(dú)立的上下文排版的方式尼夺，形成BFC后外部floating尊残、clear這些排版就失效了，BFC內(nèi)部自己形成一個(gè)內(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è)置一個(gè)屬性（當(dāng)然不能設(shè)置visiable上面已經(jīng)說了）扎阶。
要說明三個(gè)重要問題：
- 是父元素形成BFC才起作用，BFC外部和內(nèi)部的排版時(shí)隔絕的婶芭，也就是我們要解決的排版問題
- BFC不是專門用來解決邊距合并的东臀，自然會有副作用，還要自己思考最佳解決方案
- 有的時(shí)候想一下到底是要
margin還是padding
