1>概念：
BFC块级格式化上下文,他决定了元素如何对其内容进行定位，以及与其他元素的关系的相互作用。它是一个独立的渲染区域,这个区域外部毫无关系。
2>触发BFC
1)float不为none
2)position的值为absolute和fixed
3)display为inline-block，flex,inline-flex，table-cell，table-caption（非块级盒子的块级容器）
4)overflow不为visible
3>BFC规则
1)内部的BOX会在垂直方向，一个接一个垂直放置
2)BOX垂直方向的距离由margin决定，属于同一个BFC的两个相邻BOX的margin会发生重叠
3)在BFC中，每个元素的margin box的左边与包含块的border box的左边相接触
4)BFC的区域不会与float box重叠
5)BFC是一个独立的布局环境，其中的元素布局是不受外部的影响
6)计算BFC的高度时，浮动元素也会参与计算
Box:
CSS布局的基本单位，一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染