FC
FC（Formating Context）格式化上下文，是css2.1提出一个视觉渲染的概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素如何排列，以及和其他元素之间相互关系。
BFC和IFC都是常见FC。
BFC
BFC（Block Formating Context）块级格式化上下文指的是页面中一个标签，不一定是块级标签，有指定满足条件，有自己排列规范，决定了BFC区域的子元素如何排列，与其他元素之间相互关系（BFC是页面中的一个块级渲染区域）
BFC区域的特点
内部的box会在垂直方向上，一个接着一个显示。（标准文档流）box垂直方向的距离由margin决定，属于同一个BFC的两个相邻的盒子的margin会发生重叠。（属于不同的BFC区域的盒子在垂直方向上不发生重叠）
每个元素的左外边缘（margin-left），与包含块的左边相接触（对于从左往右排列的格式化，否则相反）；即使存在浮动也是如此，除非这个元素自己形成了一个新的BFC区域。
BFC区域不会与float box重叠。
BFC区域就是页面上一个独立的容器，容器里面的子元素不会影响外面的元素，反之亦然。
计算BFC区域的高度时，浮动元素也参与计算。（可以解决子元素浮动，父元素高度塌陷）
如何成为BFC容器（如何升级伪BFC区域）
（1）根标签（html标签就是一个BFC容器）（2）float不为none
（3）position为aboslute和fixed
（4）display为inline-block、table-cell、table-caption、flex（弹性盒子）
（5）overflow不为visible
BFC应用场景
场景一：每个元素的左外边缘（margin-left），与包含块的左边相接触（对于从左往右排列的格式化，否则相反）；即使存在浮动也是如此，除非这个元素自己形成了一个新的BFC区域。场景二：
每个元素的左外边缘（margin-left），与包含块的左边相接触（对于从左往右排列的格式化，否则相反）；即使存在浮动也是如此，除非这个元素自己形成了一个新的BFC区域。
BFC区域不会与float box重叠。
三列布局，左右固定，中间适应。
场景三：
计算计算BFC区域的高度时，浮动元素也参与计算。
可以解决子元素浮动，父元素高度塌陷。
场景四：
box垂直方向的距离由margin决定，属于同一个BFC的两个相邻的盒子的margin会发生重叠。
解决方案：将其中一个盒子放在一个新的BFC容器中。
IFC
行内格式化上下文（即inline Formating context），它和BFC一样，都是css2提出视觉渲染的概念。指的是一行区域的渲染规则，确定了一行中行级元素如何进行排列以及对齐。
IFC的特点
在IFC中，盒子水平放置，一个接着一个，从包含块的顶部开始。在盒子之间margin和padding在水平方向有效。
这些盒子可以通过不同的方式进行对齐，有些底部和顶部对齐，顶部和基线对齐等等。
行盒
是指整个一行的渲染区域，就叫做行盒。行盒的宽度：是由一行中内容的总宽度决定，由浮动和包含块决定的。
行盒的高度：由一行中内容高度计算得出，由行盒最高点到最低点决定。
主要影响行盒布局的css属性
font-size：字体大小会影响行盒；font-family：字体样式更改也会影响行盒。
height | line-height：行高和高度都会影响行盒。
vertical-align：设置对齐的方式，不同的对齐方式可能会影响行盒。
影响IFC区域的高度的css属性
font-size：设置字体大小，字体越大，行盒越高，以行盒中最大的高度决定。font-family：设置字体类型，不同的字体类型，占据的高度不一样，会影响IFC区域的行盒的高度。
height | line-height：分别设置盒子的高度和行高，值越大，行盒的高度越大，会影响行盒的高度。
vertical-align：设置行级元素在垂直方向的对齐方式。
取值：
baseline：默认值，基线对齐；
middle：中线对齐；
top：顶部对齐；
bottom：底部对齐；
文本之间
文本与文本之间排列方式，文本默认是参考基线进行对齐。文本与图片之间
文本的基线和图片的底部默认对齐；文本设置vertical-align：文本参考参考线与图片的底部进行对齐，文本进行移动；
图片设置vertical-align：图片设置了参考线，文本自己的参考线与图片的参考线进行对齐。
表格
设置表格中单元格中内容在垂直方向上的对齐方式；取值：
middel：单元格中内容垂直居中，默认值；
top：单元格中内容顶对齐；
bottom：单元格中内容底对齐。
