在实际经验中，经常会遇到这样一些情况，给某个元素设置了margin-top，margin-bottom实际运行却看不到效果，往往是因为发生了边距重叠。
什么是外边距重叠？
边距重叠（也叫边距合并）是指：两个或多个盒子（可能相邻或嵌套）的垂直方向的相邻外边界重合在一起，形成一个外边界的情况。
看个栗子
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#box{
background: #FBD46D;
}
#child{
height: 300px;
margin-top: 20px;
background: #5DF856;
}
</style>
<div id="box">
<div id="child"></div>
</div>
在这里，为#child这个div设置margin-top: 20px,如果不考虑边距重叠，#box这个div高度应该被撑到320px，从页面距离顶部0px的位置显示，并且上面的20px应该显示成#FBD46D，而在浏览器中真实的显示效果却不是这样，下面为真实显示效果。
可以看到#box这个div并没有像我们预期的那样，高度被撑到310px，而是里层#child子div高度，这是因为#boxf父元素与#child子元素发生了边距重叠。父子元素和兄弟元素都可能发生边距重叠，可以参考w3school的说明：http://www.w3school.com.cn/css/css_margin_collapsing.asp
怎么解决边距重叠？
解决边距重叠常用的方式是：使用BFC！
什么是BFC
BFC（Block Formatting Contexts）译为块级格式化上下文，规定了将文档显示在视觉媒体上的机制。
BFC的原理是什么
- BFC元素内的各个子元素垂直方向边距会发生重叠
- BFC元素不会与浮动元素的box发生重叠
- 计算BFC高度的时候浮动元素也会参与计算
- BFC是页面上的一个独立的容器，容器的子元素不会在布局上影响到容器外面的元素，容器外面的元素也不会在布局上影响到容器里面的元素
如何创建BFC
- flot值不为null
- position的值不为static和relative
- display的值为inline-block,table,table-cell,able-caption,flex
- overflow的值不为visible
例如：上面的栗子中为#box这个div设置overflow:hidden创建一个BFC，结果如下图所示
