1、什么是文档流？

在窗口自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. (自己的理解是从头到尾按照文档的顺序，该在什么位置就在什么位置，也可以按照上面的意思理解，自上而下，自左到右的顺序)。

2、脱离文档流

中脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。

3、脱离文档流就不占据空间了吗？

是的，它已经不属于文档流的范畴中，相当于自定义排位。就相当于它可以不用再排队了，想去哪里就去哪里。

4、脱离文档流是不是指该元素从dom树中脱离？

并没有。我觉得你会问这个问题是没弄清楚什么是dom树

• 什么是dom树了？

文档树（Document Tree）是HTML页面的层级结构。

文档流你可以理解成定位（位置）， 而dom树则是结构。

• dom树和文档流有什么差异了？

结构和位置显然是两种不同的东西。

所谓层级结构是指那些元素与元素之间的关系，

包裹我的是我的父集，与我并列的是我的兄弟集，被我包裹的是我的子集， 类似这样的关系称之为层级结构。

而文档流则类似于排队，我本应该在队伍中的，然而我脱离了队伍，但是我与我的父亲，兄弟，儿子的关系还在。

 

先引用一段W3C的文档：

9.3 Positioning schemes

In CSS 2.1, a box may be laid out according to three positioning schemes:

1. . In CSS 2.1, normal flow includes of block-level boxes, of inline-level boxes, and of block-level and inline-level boxes.
2. . In the float model, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float.
3. . In the absolute positioning model, a box is removed from the normal flow entirely (it has no impact on later siblings) and assigned a position with respect to a containing block.

An element is called out of flow if it is floated, absolutely positioned, or is the root element. An element is called in-flow if it is not out-of-flow. The flow of an element A is the set consisting of A and all in-flow elements whose nearest out-of-flow ancestor is A.

来源：

Q: 脱离文档流就不占据空间了吗？ A: 可以这么说。更准确地一点说，是一个元素脱离文档流（out of normal flow）之后，其他的元素在定位的时候会当做没看见它，两者位置重叠都是可以的。 Q: 脱离文档流是不是指该元素从dom树中脱离？ A: 不是，用浏览器的审查元素就可以看到脱离文档流的元素（例如被float了）依然会出现在dom树里，下面的截图里也可以看到。 总结： 脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。