文档流

Posted 2021-01-12 goodgirl----xiaomei

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

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

3、脱离文档流就不占据空间了吗？
是的，它已经不属于文档流的范畴中，相当于自定义排位。就相当于它可以不用再排队了，想去哪里就去哪里。

4、脱离文档流是不是指该元素从dom树中脱离？
并没有。我觉得你会问这个问题是没弄清楚什么是dom树

• 什么是dom树了？

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

文档流你可以理解成定位（位置），

而dom树则是结构。

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

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

所谓层级结构是指那些元素与元素之间的关系，
包裹我的是我的父集，与我并列的是我的兄弟集，被我包裹的是我的子集，
类似这样的关系称之为层级结构。

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

总结：
脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。

作者：张秋怡
链接：https://www.zhihu.com/question/24529373/answer/29135021
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

作者：小生
链接：https://www.zhihu.com/question/24529373/answer/132331411
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。