今天解析来自John Rosato的一篇文章“What is document flow?”，什么是文档流？

开头是摘要：

文档流是由 CSS 定位语句定义的页面元素的排列，以及 HTML 元素的顺序。 也就是说，每个元素如何占用空间以及其他元素如何相应地定位自己。

简单点说，就是 document flow 指示了页面上的元素如何去排列。

接着，讲到了 document flow 的三种影响元素位置的方法：

那么，第一种就是显示类型

HTML 元素最初按其显示类型定位。 这种显示类型决定了其他元素是否能够位于它们旁边，以及填充、边距和其他 CSS 属性如何影响它。 两种最重要的显示类型是：

老生常谈的block和inline，这里不再展开，可参考鹏哥儿写的一篇总结性文章：inline, block, inline-block区别 [2]

接下来就是float

一个float是在当前行向左或向右移动的框。 浮动（或“浮动”或“浮动”框）最有趣的特征是内容可能沿其一侧流动（或被“清除”属性禁止这样做）。 内容从左侧浮动框的右侧向下流动，并从右侧浮动框的左侧向下流动。 — W3规范

Float不太好翻译，第一句开头的float是名词形式，还是称为“浮动框”更贴切一点！

浮动框是一种CSS属性，它允许你应用在一个块级元素上，可以把这个块级元素推到父类块的左边界或者右边界。这非常有用，因为它允许你去使用块级元素所提供的所有好处，同时又能摆脱无法放置每个块级元素在同一水平线上的主要限制。然鹅，使用浮动框需要权衡取舍。

对于还未出现flex、grid布局时，想要把多个块级元素放在同一行，除了用table，就是使用这个float了。

浮动元素离开了正常的文档流。一个周知的问题是当多个子元素都为浮动时，造成父类块高度的丢失。正常来说，一个父类块的高度和宽度会拉伸去适应内容，然鹅浮动的内容不在这种情况中。父类容器的高度和宽度不会被浮动元素所修改。谢天谢地，这个臭名昭著的问题还很多解决方案，比如clearfix。你可以在这里读到更多关于clearfix。大量的网格系统使用float来设计，它确实是一个网站的架构骨干。

关于clearfix，本质上也是利用BFC[3]。

这里有几个可以应该在元素上的定位值。应该在所有元素上的初始值是static，一个在“在流”类型，我们将在之后谈到。

定位值：

定位偏移属性

这里有两组定位属性

这里有两种在流定位值，他们分别是static和relative

static在之前有提到，元素默认使用在流值static。这意味这他们正常表现，作为每一个元素的表现类型布局。他们同样不能与脱流元素相互作用。

relative定位和static非常相似，当主要是不同是他们能够和脱流元素交流。一个relative元素可以用作脱流子元素的容器。脱流定位元素会遵循relative元素的边界。很酷对吧？relative定位元素，不像static，同样可以使用定位偏移属性来去移动它。当使用这些属性时，relative定位元素盒会仍然占据它原有的定位，但是内容会变为脱流。

这里有两种脱流定位属性，他们是absolute和fixed。

在absolute定位模型中，一个盒子完全从正常文档流中移除（它不会影响后面的兄弟元素）并且分配一个相对包含块的定位。— W3规范

absolute定位元素带来了层级的概念。想象一下元素只是页面上不同的小纸片而已，你可以堆叠这些页面小纸片在彼此的顶部，这样一张小纸片会叠加在另外一张小纸片上面。W3规范同样提到它遵守一个包含块。这个包含块不是它的直接父块。在之前提到的，所有HTML元素都是static定位，不会影响脱流的元素。默认地，这个包含快是body标签。如果你希望去创建一个HTML元素包含块，那么它应该是一个除了static之外的任意一个定位元素（fixed, relative, 或者absolute）。

这里多次提到包含块(Containing Block)，可以参考鹏哥儿写的文章：习以为常的CSS包含块 [4]

fixed定位是absolute定位的子类。唯一的区别是对于一个fixed定位块，包含块是通过窗口所创建。 — W3规范

相当直接，这个窗口就是浏览器窗口。就是说，不像绝对定位元素，一个fixed定位元素不会遵循任何带有fixed/absolute/relative定位的父容器。它唯一遵循的父类块就是浏览器它本身。当你想要让一些东西常驻页面的时候，这非常有用，因为当你滚动的时候，所有fixed定位的元素会驻留在页面上。

至此我们圆满完成了文档模型的解释！这篇博文会一如既往得被调整，去包含有用信息的图片、例子和一些练习（当我有空的时候）。

总的来说，这篇文章比较干，没有代码和实例，John Rosato 主要对文档流做了一个概念性的总结，文档流其实就是对元素的定位，文档流一共分为四种：

[1] soulandwolf.com.au/blog/what-i…

[2] inline, block, inline-block区别 : mp.weixin.qq.com/s?__biz=Mzg…

[3] CSS中的FC到BFC： mp.weixin.qq.com/s?__biz=Mzg…

[4] 习以为常的CSS包含块 : mp.weixin.qq.com/s?__biz=Mzg…