组合上面的定义，并且姑且先把 formatting context 看做是一种范围限定，那么具体讲，普通流就是这样的过程：

1.在对应的 block formatting context 中，块级元素按照其在HTML中的顺序，在其容器框里从左上角开始，从上到下垂直地依次分配空间、堆砌( stack )，并独占一行，边界紧贴父容器。两相邻元素间的距离由 margin 属性决定，在同一个 block formatting context 中的垂直边界将被重叠( collapse )。并且，除非创建一个新的 block formatting context ，否则块级元素的宽度不受浮动元素的影响(这就是浮动元素能盖在块级元素上面的原因)。

2.在对应的 inline formatting context 中，行内元素从容器的顶端开始，一个接一个地水平排布。水平填充、边框和边距对行内元素有效。但垂直的填充、边框和空白边不影响其高度。一个水平行中的所有 inline box 组成了名为 line box 的矩形区域。 line box 的高度始终容下所有的 inline box ，并只与行高有关。 line box 的宽度受到父容器和浮动元素存在的影响(这就是文本环绕浮动元素)。如果 line box 的宽度小于容器， line box 的水平排布就取决于 text-align 。如果 line box 的宽度大于容器，则截断 line box 并换行在新的 line box 中重新排布元素(截断处不应用 padding 和 margin 值)。如果 line box 无法截断，如单词过长或者指定不换行，则会溢出容器。

3.对这些 block box 和 inline box 进行相对定位，即相对于已排布的位置进行偏移。元素在其中保留原来所占用的空间。

说了一堆东西，其实就只是在说如何排布元素而已。那些都非常容易理解，除了一个概念—— formatting context 。

什么是 formatting context ？ context 总是解释为上下文环境，那么格式化上下文就应该是指格式化时的前后关系。

然而对此，标准里没有更多的定义和解释。

虽然 mozilla developer center 上没有关于 inline formatting context 的资料，但是却有关于 block formatting context 的描述：一个 block formatting context 是web页面可视化CSS渲染的一个部分，是一块 block boxes 排布以及 float 元素相互作用的区域。
用自己的话简言之，那是一个作用范围。可以把它理解成是一个独立的容器，并且这个容器的里box的布局，与这个容器外的毫不相干。

下面的这些情况，都会创建一个新的 block formatting context：

• 根元素
• 浮动或绝对定位的元素
• display 值为 inline-blocks ， table-cell 或 table-caption
• overflow 值为非 visible

虽然标准里没有提到根元素会创建新的 block formatting context ，但是mozilla提到了，并且这也解释了初始的一个上下文环境的建立。

这里有个建立( establishes )的概念，这个概念和建立容器块( containing block )的概念类似。比如，A是B父元素，当B被渲染时其位置和大小会参照一个容器块，这个容器块是由其父元素A建立的。是的，有点简单问题复杂化。虽然实质上父元素就是子元素的容器，但是过程中间却有个建立( establishes )的概念。并且这个创建的概念被应用于其他作用范围，包括 block formatting context 。

想想我们平常在做的事情。当一个父元素因为子元素浮动而导致高度为0的时候，也许我们会习惯的加上这样的规则：

overflow:hidden;zoom:1; 。

overflow:hidden 不正是创建了一个新的 block formatting context 吗？那么 zoom:1 是怎么回事？这不得不提到 IE 私有的 hasLayout ，一个和 block formatting context 行为相仿的IE特产。对于 hasLayout ，本文不做讨论。可以阅读那篇有名的 On having layout ，中文版由 old9 翻译过，但是链接似乎暂时挂掉了，所以可以看看蓝色理想上转载的版本。

这就是为什么浮动元素总是容纳浮动元素的原因——浮动元素创建了新的 block formatting context，其内部的布局不在和外部有关。比如内部的浮动清除不会再影响到外部，并且内部的浮动对于外部而言也是不可见的。这也是为什么《精通CSS》会说 “应用值为 hidden 或 auto 的 overflow 属性会自动地清理任何浮动元素” 的原因。同时，这也是为什么有的时候必须用清除浮动而不是设置overflow来使父容器容纳浮动元素，因为 “设置框的overflow属性会影响它的表现”。

出处：蓝色理想
责任编辑：bluehearts

上一页 CSS定位机制之一:普通流 [1] 下一页 CSS定位机制之一:普通流 [3]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。