CSS定位机制之普通流详解

第 2 页 相对定位

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

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

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

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

虽然mozilladevelopercenter上没有关于inlineformattingcontext的资料，但是却有关于blockformattingcontext的描述：一个blockformattingcontext是web页面可视化CSS渲染的一个部分，是一块blockboxes排布以及float元素相互作用的区域。

用自己的话简言之，那是一个作用范围。可以把它理解成是一个独立的容器，并且这个容器的里box的布局，与这个容器外的毫不相干。

下面的这些情况，都会创建一个新的blockformattingcontext:

根元素浮动或绝对定位的元素display值为inline-blocks,table-cell或table-captionoverflow值为非visible虽然标准里没有提到根元素会创建新的blockformattingcontext,但是mozilla提到了，并且这也解释了初始的一个上下文环境的建立。

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

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

overflow:hidden;zoom:1;.

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

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