概述
BFC
什么是BFC
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
BFC约束
-
内部的Box会在垂直方向上一个接一个的放置
-
垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠（塌陷），与方向无关。） 每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
-
BFC的区域不会与float的元素区域重叠
-
计算BFC的高度时，浮动子元素也参与计算
-
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然 看到以上的几条约束，想想我们学习css时的几条规则
-
Block元素会扩展到与父元素同宽，所以block元素会垂直排列
-
垂直方向上的两个相邻DIV的margin会重叠，而水平方向不会(此规则并不完全正确)
-
浮动元素会尽量接近往左上方（或右上方）
-
为父元素设置overflow：hidden或浮动父元素，则会包含浮动元素
BFC触发
上文提到BFC是一块渲染区域，那这块渲染区域到底在哪，它又是有多大，这些由生成BFC的元素决定，CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC。
-
根元素
-
float的值不为none
-
overflow的值不为visible
-
display的值为inline-block、table-cell、table-caption
-
display：table也认为可以生成BFC，其实这里的主要原因在于Table会默认生成一个匿名的table-cell，正是这个匿名的table-cell生成了BFC
-
position的值为absolute或fixed
BFC应用
- 防止margin重叠（塌陷）：
- 清除内部浮动
- 自适应多栏布局的
IFC
IFC是什么
IFC(Inline Formatting Contexts) 直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)
IFC生成
设置元素为display-inline
IFC约束
-
1.IFC中的元素会在一行中从左到右排列。
-
2.在一行上的所有元素会在该区域形成一个行框。
-
3.行宽的高度为包含框的高度，高度为行框中最高元素的高度。
-
4.浮动的元素不会在行框中，并且浮动元素会压缩行框的宽度。
-
5.行框的宽度容纳不下子元素时，子元素会换到下一行显示，并且会产生新的行框。
-
6.行框的元素内遵循text-align和vertical-align。
IFC作用
-
水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。
-
垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。
