12、IFC与BFC

https://blog.csdn.net/mevicky/article/details/47008939
首先从概念入门，B是Block,I是inline,F [Formatting] C [context]。一句话概括就是格式化上下文一个是块级，一个是行级。

BFC有如下规则：
1、内部的盒子会在垂直方向，一个个的放置；
2、BFC是页面上的一个隔离的容器
3、属于同一个BFC的 两个相邻Box的 上下margin会发生重叠
4、计算BFC的高度时，浮动元素也参与计算
5、BFC的区域不会与float重叠；

触发BFC的条件：
1、body 根元素；
2、浮动元素：float 不为none的属性值；
3、绝对定位元素：position (absolute、fixed)
4、display为： inline-block、table-cells、flex
5、overflow 除了visible以外的值 (hidden、auto、scroll)

规则是作用于BFC内部的元素，而条件则是作用于BFC容器的。

在IFC中，框一个接一个水平排列，起点是包含块的的顶部。水平方向上的margin、border、padding得到保留。框在垂直方向上可以以不同的方式对齐：它们的顶部或顶部对齐，或根据其中文字的基线对齐。包含那些框的长方形区域，会形成一行，叫做行框。
IFC的一个例子:
https://blog.csdn.net/run_youngman/article/details/79343911

作用：
水平居中：当一个块要在环境中水平居中时候，设置其为inline-block则会在外层产生IFC，通过text-align:center则可以使其水平居中。

垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle,其他行内元素则可以在此父元素下垂直居中。