IFC,BFC

自然流(Normal flow)

在自然流中的盒子，属于某种格式化上下文。CSS2.2中。块级盒子参与块格式化上下文，行内盒子参与行内格式化上下文。未来可能有其他的。

块格式化上下文

浮动、绝对定位、不是块盒子的块容器(例如，inline-block,table-cells,table-captions)和 'overflow'除了'visible'的块盒子为内容创建新的块格式化上下文。

在块格式化上下文中，盒子一个一个从上到下竖直的一个一个堆叠。兄弟盒子间的竖直距离由margin决定。块级格式化下文中临界的两个块级盒子的margin会合并。

行内格式化上下文

块包含盒子里面没有块级元素的情况，就会创建行内格式化上下文。

在行内格式化上下文中，盒子一个接着一个，从上面开始水平排布。水平margin，border，padding在盒子中间排布。盒子竖直方向有多个方式来对齐：顶部、底部、文字基线对齐。包含盒子的矩形区域叫做行框

行框的宽又包含块和float决定。行框的高又行高的计算规则决定。

行框总是足够高来包含所有的盒子。当盒子B的高度低于行框高度的时候，竖直方向的对齐可以通过'vertical-align'来指定。当若干行内盒子的宽度超过一行的宽度的时候，这些盒子拆分为竖直堆叠的多个行框。这样，一个段落就是一组竖直堆叠的行框。行框堆叠没有竖直间隔（除非特别指定）并且，不会重合。

一般来说，行框的左边界触碰包含块的左边界，右边触碰包含块的右边。然后，浮动盒子在包含块的边和行框边中间。这样，尽管在同一个行内格式化上下文中，行框有相同的宽（等于包含块的宽），因为float框的存在，他们可用宽是变化的。同一个行内格式化上下文中，行框的高度也是会变好的（例如，一行包含一个更高的图片）

当行内级别盒子的总和少于行框宽度的时候，他们的水平分布通过'text-align'决定。

当一个行内盒子的宽超过行框宽的时候，会拆分为若干盒子，并且这些盒子分布在若干行框中。如果，这个行内框不能拆分（例如，一个行内框包含单个字符，行内框被white－space的 nowarp 或者pre影像。）

当行内框拆分的时候，marign，border，padding在拆分的地方是没有视觉效果的。

行框是作为包含行内格式化上下文中的行内级别的内容来创建的。行框不包含文本，没有保留空格，没有行内元素（非0marign，border，padding），没有其他流内的内容（例如，image，inline block 或者 inline table），没有用保留的新行结束 应该看作0高度的行框来为里面的元素定位，其他情况下当作不存在。