一、BOX模型
box是CSS中布局的基本单位，而不同类型的box，会参与不同的Formatting Context（一个决定如何渲染文档的容器），box内的元素会以不同的方式渲染。
block-level：display属性为blcok、table、list-item，会生成block-level box，并参与Block Formatting Context。
inline-level：display属性为inline、inline-block，inline-table，会生成inline-level box，并参与Inline Formatting Context。
二、Formatting Context
Formatting Context是页面中的一块渲染区域，并有一套渲染规则，决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
常见的Formatting Context：
1.Block Formatting Context ：BFC 块级格式化上下文
2.Inline Formatting Context ：IFC
三、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。