块级格式化上下文（BFC）

首先要弄明白什么是常规流（普通流）

行元素会从左向右水平排列垂直方向上一次排列，直到该行被占满才会换行，块元素的特性是独占一行当width未设置时会自动填充满父容器，
常规流块盒之间的margin会合并，块状元素之间的margin会合并。快元素的margin-top会向父级传递。

BFC是什么：

BFC 直译为"块级格式化上下文"它是一个独立的渲染区域，它规定了该区域的布局流向，BFC包含创建它的元素内部的所有内容，创建BFC元素里的子元素不会影响到外面的元素，不同的BFC在进行渲染时互不干扰。
BFC对浮动元素与清除浮动都很重要。浮动和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠（Margin collapsing）也只会发生在属于同一BFC的块级元素之间。

BFC元素的特点：

• 创建BFC的元素隔绝了内部与外部的联系，内部元素不会影响到他的外部元素。
• 创建BFC的元素会计算浮动元素的高度（不会出现高度塌陷问题）。
• 创建BFC元素之间的margin不会合并。

下面这些属性元素会创建BFC：

根元素()
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块元素（元素的 display 为 inline-block）
overflow 值不为 visible 的块元素
弹性元素（display为 flex 或 inline-flex元素的直接子元素）
多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）

为了更好的理解BFC，我们先看看下面这些例子：

解决margin-top向上传递问题：
在一个父级包含框内创建一个子元素给子元素设置margin-top，在正常流中子元素就会带着父元素向下走而子元素与父元素之间并没有变化

.a{
    width: 200px;
    height: 200px;
    background: #f00
}
.b{
    width: 100px;
    height: 100px;
    background: #ffff00;
    margin-top: 30px
}

现在给父元素a设置一条overflow: hidden;在父元素内部触发了BFC，内部的元素不会影响到外面去。

.a{
    width:200px;
    height:200px;
    background: #f00;
    overflow: hidden;
}
.b{
    width:100px;
    height:100px;background: #ffff00;
    margin-top:30px
}