BFC和IFC

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.段落展示。