当2个div上下margin碰在一起的时候，只会显示一个margin。 其实是 BFC 搞的鬼
BFC 格式化上下文，是web页面中盒模型布局的css渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器，只有block-level box参与，它规定了内部block-lebel box如何布局，并且与这个区域外部毫不相干
形成BFC的条件：
浮动元素，float 除 none 以外的值
定位元素，position（absolute，fixed）
display 为 inline-block、table-cell、table-caption
overflow 为 hidden、auto、scroll
BFC的特性
内部的box会在垂直方向上一个接一个的放置
垂直方向上的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠
BFC的区域不会喝float的元素区域重叠
计算BFC的高度时，浮动元素也参与计算
BFC就是页面上的一个独立容器，容器里面的子元素不会影响外面元素