文档流

文档流是什么？

看法一：

个人觉得文档流的翻译容易误导人，没看过原版的我竟然拿"document flow"去Google……原文是"normal flow"，不明白为什么会被翻译成文档流，也有人叫普通流、正常流，指语言文本从左到右，从上到下显示，这是传统HTML文档的文本布局。浮动(float)、绝对定位(absolute)、固定定位(fixed)三种方式定位会脱离文档流。

看法二:

文档流是相对于盒子模型讲的文本流是相对于文子段落讲的元素浮动之后，会让它跳出文档流，也就是说当它后面还有元素时，其他元素会无视它所占据了的区域，直接在它身下布局。

但是文字却会认同浮动元素所占据的区域，围绕它布局，也就是没有拖出文本流。但是绝对定位后，不仅元素盒子会拖出文档流，文字也会出文本流。那么后面元素的文本就不会在认同它的区域位置，会直接在它后面布局，不会在环绕。当然你可以使用 index-z 来让底部的元素到上面来，类似于一个图层的概念

看法三：

文档流是文档中可显示对象在排列时所占用的位置。比如网页的div标签它默认占用的宽度位置是一整行，p标签默认占用宽度也是一整行，因为div标签和p标签是块状对象。 网页中大部分对象默认是占用文档流，也有一些对象是不占文档流的，比如表单中隐藏域。

看法四：

写html，css的同学应该需要清楚什么是文档流。文档流：将窗体自上而下分成一行一行,并在每行中按从左至右的挨次排放元素,即为文档流。
看法五：
 刚接触CSS时经常听到看到一个词"文档流"，那到底什么是"文档流"呢？然后会看到"绝对定位和浮动定位能脱离文档流"，从这句可以看到文档流和绝对定位、浮动定位是同一个范畴的概念，再后来在W3C标准文档找到关于Absolute positioning和Float的内容，却怎么也找不到Document flow(文档流)的资料。后来终于知道是某位大神将Normal flow翻译为文档流而已。。。。。。而我更偏好它的直译"常规流"，或直接引用英文名词就好了。

看法6

normal flow is how these block and inline elements will display on the web page without any intervention by the web designer.

什么是脱离文档流？

定义1：

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

定义2：

脱离文档流是相对正常文档流而言的。正常文档流就是我们没有用CSS样式去控制的HTML文档结构，你写的界面的顺序就是网页展示的顺序。比如写了5个div元素。正常文档流就是按照依次显示这5个div元素。由于div元素是块元素，因此每个div元素独占一行

哪种情况会脱离文档流？

看法1：

浮动和绝对定位元素都脱离了当前的文档流。浮动元素是否脱离了文档流一直是一个争议话题，我个人的理解是绝对定位完全脱离文档流，但浮动元素只是改变了文档流，并且会对其他元素产生影响，所以并不能说脱离了文档流。

总结

文档流就是个翻译引起的车祸！
多看点英文资料。少看二手资料。

参考

文档流 - Newbie_小白 - 博客园
(14 条消息)css脱离文档流到底是什么意思，脱离文档流就不占据空间了吗？脱离文档流是不是指该元素从dom树中脱离？ - 知乎
DOM中关于脱离文档流的几种情况分析 - 推酷
HTML文档流CSS入门教程绿叶学习网
(14 条消息)CSS 定位体系中的 Normal flow 应该如何翻译比较好？ - 知乎
Definition of Normal Flow in Web Page Design

作者：鸭梨山大哎
链接：https://www.jianshu.com/p/321c4e8db6a6