Box：CSS布局的基本单位
Formatting context是页面中的一块渲染区域，最常见的是BFC和IFC，CSS3增加了GFC和FFC
BFC定义：块级格式化上下文，它是一个独立的渲染区域，只有Block-level box参与，它规定了内
部的Block-level Box如何布局，并且与这个区域外部毫不相关。
BFC布局规则：
（1）内部的Box会在垂直方向，一个接一个地放置
（2）Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
（3）每个元素的margin box的左边与包含块border box的左边相接触。即使存在浮动也是如此。
（4）BFC区域不会与float box重叠
（5）BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也是
如此。
（6）计算BFC的高度时，浮动元素也参与计算
哪些元素会生成BFC？
（1）根元素
（2）float属性不为none
（3）position为absolute或fixed
（4）display为inline-block,table-cell,table-caption,flex,inline-flex
（5）overflow不为visible