css BFC IFC

一、格式化上下文

1.1 FC

FC的全称是：Formatting Contexts 格式化上下文

常见的FC有：

• BFC（Block Formatting Contexts）：块级格式化上下文

• IFC（Inline Formatting Contexts）：内联格式化上下文

• GFC（GridLayout Formatting Contexts）：网格布局格式化上下文

• FFC（Flex Formatting Contexts）：自适应格式化上下文

1.2 BFC

Block Formatting Context 叫做“块级格式化上下文”。

特点

1. 垂直方向盒子一个个排列
2. 边距由margin决定，相邻盒子的margin会合并 
3. 盒子与容器的左边贴边，即使是浮动元素也是如此

4. BFC区域不会与浮动的元素重叠

5. BFC是一个独立的容器，内部不会影响外部的，外部不会影响内部的

让父盒子变为BFC区域的方法

1. 根元素；
2. float的属性不为none
3. position为absolute或fixed
4. display为inline-block，table-cell，table-caption，flex；
5. overflow不为visible

1.3 IFC

 IFC(Inline Formatting Contexts)为"内联格式化上下文"

特点

1. IFC的高度由最高的线框决定（线框高度可以不同，是以内容计算高度的，不受垂直方向的margin，padding，border的影响）

2. IFC中的线框紧贴在IFC中，会被浮动的元素扰乱，导致IFC区域缩短

3. IFC区域内每个线框的高度可以不同

4. IFC会被块级元素切断，在垂直方向上产生两个IFC

对齐

• 行内块元素单行文本，文本基线对齐

• 行内块元素多行文本，最后一行文本基线对齐

• 行内块元素没有内容，底边对齐

• 行内元素单行文本，文本基线对齐

• 行内元素没有文本，基线对齐

居中

        水平居中：当一个块要在盒子中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。

        垂直居中：插入一个伪元素转化为行内块，设置高度为盒子宽度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。  或不插入伪元素，用一个元素将行高设置为父元素的高度也可以