最近在纠结程序语言和设计语言中的一些概念，整到层叠上下文和图层相关的事情，然后发现自己对于CSS中的层叠相关的知识并没有自己想象中那样理解的透彻。因此花了一段时间重新梳理了一下相关的知识。

如果想要理解清楚CSS中的层叠相关的知识点，我们就很有必要先了解一些重要的概念：

• 文档流（Normal Flow）
• 格式化上下文（Formatting Context）
• 层叠上下文（Stacking Context）
• 层叠水平（Stacking Level）
• 层叠顺序（Stacking Order）

文档流

在CSS中，文档流是一个很基础也是很重要的一个概念。很多时候她被称为Document Flow，但在CSS的标准被称为Normal Flow，即普通流或常规流。大家更喜欢称之为文档流。那么CSS的文档流是怎么一回事呢？

在HTML中任何一个元素其实就是一个对象，也是一个盒子。在默认情况下它是按照出现的先后顺序来排列，而这个排列的顺序就是文档流。

文档流是元素在Web页面上的一种呈现方式。所有的HTML元素都是块盒子（Block Boxes，块级元素）或行内框（Inline Boxes，行内元素）。当浏览器开始渲染HTML文档时，它从窗口的顶端开始，经过整个文档内容的过程中，分配元素需要的空间。除非文档的尺寸被CSS规则限定，否则浏览器垂直扩展文档来容纳全部的内容。每个新的块级元素渲染为新行。行内元素则按照顺序被水平渲染直到当前行遇到边界，然后换到下一行垂直渲染。

如果你读过CSS相关的规范，不难发现这样的过程包括了块格式化(BFC：Block formatting context)、行内格式化（IFC：Inline formatting context）、相对定位（Relative positioning）和Run-in Boxes的定位。

事实上，在普通文档流中的盒子属于一种格式化上下文（Formatting Context）,大家较为熟悉的就是块格式化上下文（Block formatting context）和行内格式化上下文（Inline formatting context）。不过有一点面要注意，它们只能是其中一者，但不能同时属于两者。言外之意，任何被渲染的HTML元素都是一个盒子（Box），这些盒子不是块盒子就是行内盒子。即使是未被任何元素包裹的文本，根据不同的情况，也会属于匿名的块盒子或行内盒子。

综合上面的描述，也可以理解格式化上下文对元素盒子做了一定的范围的限制，其实就是类似有一个width和height做了限制一样。如果从这方面来理解的话，普通流就是这样的一个过程：

• 在对应的块格式化上下文中，块级元素按照其在HTML源码中出现的顺序，在其容器盒子里从左上角开始，从上到下垂直地依次分配空间层叠（Stack），并且独占一行，边界紧贴父盒子边缘。两相邻元素间的距离由margin属性决定，在同一个块格式化上下文中的垂直边界将被重叠（Collapse margins）。除非创建一个新的块格式化上下文，否则块级元素的宽度不受浮动元素的影响。
• 在对应的行内格式化上下文中，行内元素从容器的顶端开始，一个接一个地水平排列。

扯了这么多，如果简单的描述就是：如何排列HTML元素而已。拿个块格式化上下文的普通文档流来举例，就像下面这样：

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

对应的效果如下：

上例中看到的文档流就是一个普通的文档流，也是一个正常的普通文档流。

在CSS中也可以通过float或者position:absolute两种方法让元素脱离文档流。而这两者的表现实际上非常相似。简单的可以理解为部分无视和完全无视的区别：

使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围(可以说是部分无视)。而对于使用position:absolute脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它(可以说是完全无视)。

格式化上下文

在介绍文档流的一节中，多次提到了格式化上下文这个概念。那么格式化上下文指的又是什么呢？

格式化上下文指的是初始元素定义的环境。

其主要包含两个要点，一个是元素定义的环境，另一个是初始化。

在CSS中，元素定义的环境有两种，也就是前面提到：块格式化上下文和行内格式化上下文。这两种上下文定义了在CSS中元素所处的环境，格式化则表明了在这个环境中，元素处理此环境中应当被初始化。用一句话来描述就是：

元素在此环境中应当如何排版布局等。

块格式化上下文其实也是大家常常称为的BFC，指的是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

下列方式会创建块格式化上下文：

• 根元素或包含根元素的元素
• 浮动元素（元素的 float 不是 none）
• 绝对定位元素（元素的 position 为 absolute 或 fixed）
• 行内块元素（元素的 display 为 inline-block）
• 表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
• 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
• 匿名表格单元格元素（元素的