边距合并和BFC

首先明确边距合并是个什么问题。
举例说明：

什么叫边距合并

总结边距合并的三种情况（上图都已经有体现了）：

• 当子元素和父元素垂直之间没有padding、没有border也没有内容时就会发生外边距合并，总体外边距变为两个外边距中的较大者
• 相邻兄弟元素的垂直上下之间也会出现外边距合并；
• 一个元素内部没有内容、没有border、也没有padding会发生外边距合并；

---

题外话：为什么发生边距合并？

首先要明白html最初设计目的是和一个文本文档一样，默认也是大家在里面写文章放图片，那么自然要换行，所以这个margin就是控制行间距的。自然很多情况下要智能地边距合并才能符合使用者的本意。所以不要怪罪浏览器的解析方式。

---

不感兴趣的就只看这句话：边距合并是个排版问题。

好了，重点是怎么解决边距合并问题。
比较通用的方法是使用BFC。解释一下BFC是啥：
BFC是块级元素自身形成独立的上下文排版的方式，形成BFC后外部floating、clear这些排版就失效了，BFC内部自己形成一个内部空间
形成BFC的方式，为了防止误解直接给出MDN上的原文：

A block formatting context is created by one of the following:

1. the root element or something that contains it
2. floats (elements where float is not none)
3. absolutely positioned elements (elements where position is absolute or fixed)
4. inline-blocks (elements with display: inline-block)
5. table cells (elements with display: table-cell, which is the default for HTML table cells)
6. table captions (elements with display: table-caption, which is the default for HTML table captions)
7. elements where overflow has a value other than visible
8. flex boxes (elements with display: flex or inline-flex)

言归正传，我们解决边距合并问题不是用上面随便一条形成bfc就可以的。比如第1条，稍微思考一下就知道和解决我们的问题没关系。靠谱的是我们利用overflow设置一个属性（当然不能设置visiable上面已经说了）。
要说明三个重要问题：

• 是父元素形成BFC才起作用，BFC外部和内部的排版时隔绝的，也就是我们要解决的排版问题
• BFC不是专门用来解决边距合并的，自然会有副作用，还要自己思考最佳解决方案
• 有的时候想一下到底是要margin还是padding