// 本文参考多篇文章，视频，官方文档而成，具体链接均在文中给出
从 BFC 开始
margin 垂直方向重叠并不是一个 BUG 而是一种官方规定的规则，这个规则就叫做 BFC（block formating contexts），如果你还不了解 BFC，可以观看这个视频快速学习。
如果你想看 w3c 关于 BFC 的 margin 垂直方向重叠的规定，点击这里
在这个规定里，规定了 BFC 的其中一个特性，这个特性就是块级元素上下排列时，margin 重叠，且重叠的 margin 值为最大的那个值
综上，margin 垂直方向重叠问题是一个正常的现象，但是有时候我们并不想要这个东西，下面我们看一下具体的，有哪些重叠的情况和解决方法。
构造 BFC
本文讲的是如何用 bfc 来解决这个问题，所以我们先来讲一讲 bfc，如果你观看了上面的视频，那么已经清楚了什么是 bfc 了。
bfc 可以把它想象成一个属性，有了这个属性，元素就自成一块，这个容器独立于其他容器，不会干扰其他容器的布局，所以这个 bfc 也是普通流的一种。
要形成 bfc 只需要以下方式即可。
只要你在元素中设置其中一种，就可以形成 bfc 容器。
用 BFC 来解决
常见的重叠现象
- 同一层相邻元素之间，相邻元素外边距重叠
- 父元素与子元素重叠
- 空的块级元素重叠
【注】具体点击下方参考中 MDN 的文章
父元素与子元素之间
这里我们以第二个情况举例，如何用 bfc 本身解决这个问题。
如果你没有在垂直方向上为元素设置边框，内边距，行内文本，BFC 或者清除浮动，那么就会形成父元素与子元素的 margin 重叠
解决前
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;padding: 0;}
#div1{
margin: 30px; width: 200px; height: 200px; background-color: orange;}
#div2{
margin: 20px; width: 100px; height: 100px; background-color: gray;}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
可以看到，我们为橘色父正方形设置了 margin 为 30px，为灰色子正方形设置了 margin 为 20px，但是子元素并没有和父元素之间形成我们想要的间隔。
用 BFC 解决
在 #div1 中添加 overflow: hidden; 即可
