BFC（Block formatting contexts）
BFC又称“块格式化上下文”
一.布局规则：
1.BFC是一个独立的区域，内部的元素按照它的规则进行渲染，不会与BFC外部打交道。
2.内部的盒子会在垂直方向，一个一个地放置；
3.盒子垂直方向的距离由margin决定，属于同一个BFC的相邻Box上下margin会发生重叠；
4.每个元素的左边，与包含的盒子的左边相接触，浮动情况也不例外；
5.BFC的区域不会和float重叠；
6.计算BFC的高度时，浮动元素也参与计算。
二.BFC可以干什么？
1.清楚元素内部的浮动效果；
2.防止垂直的margin重叠；
3.防止margin溢出；
4.左边定宽，右边自适应布局。
三.哪些元素会产生BFC？
1.根元素；
2.float为left或right；
3.position为absolute或fixed或sticky；
4.display为inline-block，table-cell，table-caption，flex，inline-grid；
5.overflow不为visible的元素。
IFC（Inline formatting contexts）
IFC又称“行级格式上下文”
一.布局规则
1.内部的盒子会在水平方向，一个个地放置；
2.IFC的高度，由里面最高盒子的高度决定；
3.当一行不够放置的时候会自动切换到下一行；
二.用法
1.内联元素水平居中；
2.内联元素垂直居中；
3.段落展示。
