BNF
Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位， 直观点来说，就是?一个?页?面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（?一个决定如何渲染?文档的容 器），因此Box内的元素会以不同的?方式渲染。让我们看看有哪些盒?子： block-level box:display 属性为 block, list-item, table 的元素，会?生成 block-level box。并且参与 block foma tting context； inline-level box:display 属性为 inline, inline-block, inline-table 的元素，会?生成 inline-level box。并且参与 i nline formatting context； Formatting context Formatting context 是 W3C CSS2.1 规范中的?一个概念。它是?页?面中的?一块渲染区域，并且有?一套渲染规则，它 决定了其?子元素将如何定位，以及和其他元素的关系和相互作?用。最常?见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。 CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 GFC 和 FFC。 BFC 定义 BFC(Block formatting context)直译为"块级格式化上下?文"。它是?一个独?立的渲染区域，只有Block-level box参 与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 哪些元素会?生成BFC? 根元素 float属性不为none position为absolute或fixed display为inline-block, table-cell, table-caption, flex, inline-flex overflow不为visible
IFC
在IFC中，框（boxes）?一个接?一个地?水平排列，起点是包含块的顶部。?水平?方向上的margin，border和padding在框之间得到 保留。框在垂直?方向上可以以不同的?方式对?齐：它们的顶部或底部对?齐，或根据其中?文字的基线对?齐。包含那些框的?长?方形区域， 会形成?一?行，叫做?行框(line box)。 ?一个?行框的宽度由包含它的元素的宽度和包含它的元素?里?面有没有float元素来决定，?高度的确定由?行?高度计算规则决定。 ?行框的?高度?足以包含他的内部容器，也可能?比它包含的容器们都?高（?比如在基线对?齐的时候），当他包含的内部容器的?高度?小于?行 框的?高度时，内部容器的垂直位置由?自?己的vertical（默认值是baseline）这个属性来确定。（这个性质可以?用来实现垂直居中）
原文：http://www.cnblogs.com/sosore/p/5326356.html