前端开发领域有两个很常用的术语，就是IFC和BFC。IFC，也就是inline formatting context（行内级格式化上下文），是在普通文档流中所有行内盒子参与的上下文，而相对的，BFC，也就是block formatting context（块级格式化上下文），则是所有块级盒子参与的上下文。下面分别进行探讨。

BFC

BFC的触发条件

要让文档流触发BFC，要满足以下任意一种条件

• float的值不为none

• position 的值不为 static 或 relative

• display 的值为 table-cell、table-caption、inline-block、flex 或 inline-flex

• overflow 的值不为 visible

BFC的特性

1. 在BFC中,盒子都是从它的包含块的顶部一个一个的垂直放置的。两个相邻盒子的垂直间距决定于margin属性。在BFC中,两个相邻块级盒子之间垂直方向上的外边距是会塌陷的。也即，两个相邻边框作为一个边框显示（取较长那个）

2. 在BFC中,每个盒子的左外边界挨着包含块的左边界(对于从右到左的格式化,则为右边界互相挨着)。即使是存在浮动元素也是如此(即使一个盒子的行盒是因为浮动而收缩了的),除非这个盒子建立了一个新的BFC(在某些情况下这个盒子自身会因为浮动而变窄)。也即，浮动元素的高度可以被正确计算

IFC

IFC的特性

1. 在IFC中，盒子水平放置，一个接着一个，从包含块的顶部开始。水平margins,borders,和padding在这些盒子中被平分。这些盒子也许通过不同的方式进行对齐:他们的地步和顶部也许被对齐，或者通过文字的基线进行对齐

2. line box的宽度由浮动情况和它的包含块决定。line box的高度由line-height的计算结果决定

3. 一个line box总是足够高对于包含在它内的所有盒子。然后，它也许比包含在它内最高的盒子高。(比如，盒子对齐导致基线提高了)。当盒子B的高度比包含它的line box的高度低，在line box内的B的垂值对齐线通过’vertical align’属性决定。

值得一提的是，有时两个相邻的IFC元素并不能完全水平对齐，这时一个vertical-align: top/bottom;样式可能会很有用，因为IFC的水平对齐方式是根据它来计算的。

另外，如果出现了两个IFC元素不能紧挨在一起的情况，那么可能是因为这两个元素的父元素的字体大小不为0，导致在计算间距的时候出错，可以显式指定它们的父元素为font-size: 0;，一般就可以解决这个问题。另外一种解决方法是，把HTML代码中的换行全部删去，因为换行实际上在进行解析的时候是会计算间距值的，但我们一般采用第一种方式。