文檔流是什么？

看法一：

個人覺得文檔流的翻譯容易誤導人，沒看過原版的我竟然拿"document flow"去Google……原文是"normal flow"，不明白為什么會被翻譯成文檔流，也有人叫普通流、正常流，指語言文本從左到右，從上到下顯示，這是傳統(tǒng)HTML文檔的文本布局。浮動(float)、絕對定位(absolute)、固定定位(fixed)三種方式定位會脫離文檔流。

看法二:

文檔流是相對于盒子模型講的文本流是相對于文子段落講的元素浮動之后，會讓它跳出文檔流，也就是說當它后面還有元素時，其他元素會無視它所占據(jù)了的區(qū)域，直接在它身下布局。

但是文字卻會認同浮動元素所占據(jù)的區(qū)域，圍繞它布局，也就是沒有拖出文本流。但是絕對定位后，不僅元素盒子會拖出文檔流，文字也會出文本流。那么后面元素的文本就不會在認同它的區(qū)域位置，會直接在它后面布局，不會在環(huán)繞。當然你可以使用 index-z 來讓底部的元素到上面來，類似于一個圖層的概念

看法三：

文檔流是文檔中可顯示對象在排列時所占用的位置。比如網(wǎng)頁的div標簽它默認占用的寬度位置是一整行，p標簽默認占用寬度也是一整行，因為div標簽和p標簽是塊狀對象。 網(wǎng)頁中大部分對象默認是占用文檔流，也有一些對象是不占文檔流的，比如表單中隱藏域。

看法四：

寫html，css的同學應該需要清楚什么是文檔流。文檔流：將窗體自上而下分成一行一行,并在每行中按從左至右的挨次排放元素,即為文檔流。
看法五：
?剛接觸CSS時經(jīng)常聽到看到一個詞"文檔流"，那到底什么是"文檔流"呢？然后會看到"絕對定位和浮動定位能脫離文檔流"，從這句可以看到文檔流和絕對定位、浮動定位是同一個范疇的概念，再后來在W3C標準文檔找到關于Absolute positioning和Float的內(nèi)容，卻怎么也找不到Document flow(文檔流)的資料。后來終于知道是某位大神將Normal flow翻譯為文檔流而已。。。。。。而我更偏好它的直譯"常規(guī)流"，或直接引用英文名詞就好了。

看法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文檔結構，你寫的界面的順序就是網(wǎng)頁展示的順序。比如寫了5個div元素。正常文檔流就是按照依次顯示這5個div元素。由于div元素是塊元素，因此每個div元素獨占一行

哪種情況會脫離文檔流？

看法1：

浮動和絕對定位元素都脫離了當前的文檔流。浮動元素是否脫離了文檔流一直是一個爭議話題，我個人的理解是絕對定位完全脫離文檔流，但浮動元素只是改變了文檔流，并且會對其他元素產(chǎn)生影響，所以并不能說脫離了文檔流。

總結

文檔流就是個翻譯引起的車禍！
多看點英文資料。少看二手資料。

參考

文檔流 - Newbie_小白 - 博客園
(14 條消息)css脫離文檔流到底是什么意思，脫離文檔流就不占據(jù)空間了嗎？脫離文檔流是不是指該元素從dom樹中脫離？ - 知乎
DOM中關于脫離文檔流的幾種情況分析 - 推酷
HTML文檔流CSS入門教程綠葉學習網(wǎng)
(14 條消息)CSS 定位體系中的 Normal flow 應該如何翻譯比較好？ - 知乎
Definition of Normal Flow in Web Page Design