在页面布局时经常会遇到父元素高度塌陷或者父子元素垂直方向外边距重叠的情况：
- 子元素都设置了浮动，父元素高度无法被撑开
- 父子级上下margin重叠，以较大值渲染
- 空元素设置margin-top和margin-bottom，取较大值作为最终边距
- 兄弟元素每个都有上/下边距，取较大值
举个栗子：
<style>
.top{
margin-bottom: 15px;
width: 100px;
height: 100px;
background-color: orange;
}
.bottom{
margin-top: 10px;
width: 100px;
height: 100px;
background-color: teal;
}
</style>
<body>
<div class="top"></div>
<div class="bottom"></div>
</body>
这个时候上下两个div之间垂直方向的距离会取较大的那个值，也就是15px，并不会是两个值相加最后距离为25px。
外边距重叠非常常见，那出现这种情况的原因到第是什么呢？
先来了解一下BFC：
Block Formatting Context，块级格式上下文。
BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (BFC)和 Inline formatting context (IFC)。
以下几种情况会触发BFC：
- 设置浮动float。
- overflow: hidden || scroll || auto （非visible）。
- position: absolute || fixed （非releative）。
- display值为inline-block、table-cell、flex、table-caption、inline-flex （非none || inline || block）。
- 父元素与正常文件流的子元素（非浮动）自动形成一个BFC。
BFC元素的特点：
- 同一个BFC中的父子元素或相邻兄弟元素垂直方向上外边距会重叠。
- 不会与浮动元素重叠，在计算高度的时候，也会把浮动的子元素高度计算在内。（用来清除浮动）
- BFC是一个独立的容器，内外的元素布局不会相互影响。
- BFC父盒子（块盒与行盒）的border box的内边界，与子盒子margin box的外边界相接触。即使子元素浮动也是如此。
了解了BFC，现在知道了前面例子发生边距重叠的原因，那如何解决呢？
同一个BFC内兄弟元素垂直方向会发生边距重叠，那我们可以利用这一点，去触发新的BFC，让它们不处在同一BFC中。
<style>
.top{
margin-bottom: 15px;
width: 100px;
height: 100px;
background-color: orange;
}
.bottom{
margin-top: 10px;
width: 100px;
height: 100px;
background-color: teal;
}
.container{
overflow: hidden;
}
</style>
<body>
<div class="top"></div>
<!-- 用div去包裹其中一个div并触发父级BFC -->
<div class="container">
<div class="bottom"></div>
</div>
</body>
也可以这样做：
<style>
.top{
margin-bottom: 15px;
width: 100px;
height: 100px;
background-color: orange;
}
/*下面元素浮动*/
.bottom{
float: left;
margin-top: 10px;
width: 100px;
height: 100px;
background-color: teal;
}
</style>
<body>
<div class="top"></div>
<div class="bottom"></div>
</body>
