BFC(块级格式化上下文）

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内的元素会以不同的方式渲染