今天解析來自John Rosato的一篇文章“What is document flow?”，什麼是文檔流？
開頭是摘要：
文檔流是由 CSS 定位語句定義的頁面元素的排列，以及 HTML 元素的順序。 也就是説，每個元素如何佔用空間以及其他元素如何相應地定位自己。
簡單點説，就是 document flow 指示了頁面上的元素如何去排列。
接着，講到了 document flow 的三種影響元素位置的方法：
- 顯示類型
- Float
- 定位
顯示類型
那麼，第一種就是顯示類型
HTML 元素最初按其顯示類型定位。 這種顯示類型決定了其他元素是否能夠位於它們旁邊，以及填充、邊距和其他 CSS 屬性如何影響它。 兩種最重要的顯示類型是：
- 塊級
- 內聯
老生常談的block和inline，這裏不再展開，可參考鵬哥兒寫的一篇總結性文章：inline, block, inline-block區別 [2]
Float
接下來就是float
一個float是在當前行向左或向右移動的框。 浮動（或“浮動”或“浮動”框）最有趣的特徵是內容可能沿其一側流動（或被“清除”屬性禁止這樣做）。 內容從左側浮動框的右側向下流動，並從右側浮動框的左側向下流動。 — W3規範
Float不太好翻譯，第一句開頭的float是名詞形式，還是稱為“浮動框”更貼切一點！
浮動框是一種CSS屬性，它允許你應用在一個塊級元素上，可以把這個塊級元素推到父類塊的左邊界或者右邊界。這非常有用，因為它允許你去使用塊級元素所提供的所有好處，同時又能擺脱無法放置每個塊級元素在同一水平線上的主要限制。然鵝，使用浮動框需要權衡取捨。
對於還未出現flex、grid佈局時，想要把多個塊級元素放在同一行，除了用table，就是使用這個float了。
浮動元素離開了正常的文檔流。一個周知的問題是當多個子元素都為浮動時，造成父類塊高度的丟失。正常來説，一個父類塊的高度和寬度會拉伸去適應內容，然鵝浮動的內容不在這種情況中。父類容器的高度和寬度不會被浮動元素所修改。謝天謝地，這個臭名昭著的問題還很多解決方案，比如clearfix。你可以在這裏讀到更多關於clearfix。大量的網格系統使用float來設計，它確實是一個網站的架構骨幹。
關於clearfix，本質上也是利用BFC[3]。
定位
這裏有幾個可以應該在元素上的定位值。應該在所有元素上的初始值是static，一個在“在流”類型，我們將在之後談到。
定位值：
- 值：
static|relative|absolute|fixed|inherit- 初始值：
static定位偏移屬性
- 屬性：
top|right|bottom|left這裏有兩組定位屬性
- 在流
- 脱流
在流
這裏有兩種在流定位值，他們分別是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 主要對文檔流做了一個概念性的總結，文檔流其實就是對元素的定位，文檔流一共分為四種：
- 正常文檔流 normal document flow
- 顯示類型 display type
- 浮動框 float
- 定位 position
理解以上幾種文檔流後，我們對瀏覽器如何對各個元素排兵佈陣有了更加宏觀性地瞭解，可以關注個人公眾號【鵬哥兒的Echo】，學習更多。
REFERENCE
[1] https://soulandwolf.com.au/bl...
[2] inline, block, inline-block區別 : https://mp.weixin.qq.com/s?__biz=Mzg4MjY3NTk5OA==&mid=2247484012&idx=1&sn=cbeb9cb9385bd364ebfc38feaf55a41f&chksm=cf525a1df825d30bce67e954886a73b23c99a2504e93130a473877117e9c8eab460cce6f4eb5&token=666331130&lang=zh_CN#rd
[3] CSS中的FC到BFC： https://mp.weixin.qq.com/s?__biz=Mzg4MjY3NTk5OA==&mid=2247484298&idx=1&sn=1c55ab955db816ff2372020e0667c942&chksm=cf525bfbf825d2edc4262ca7b9a6f74b09877722574ca43824188098a8f4c0bcbde379ce7fce&token=32773786&lang=zh_CN#rd
[4] 習以為常的CSS包含塊 : https://mp.weixin.qq.com/s?__biz=Mzg4MjY3NTk5OA==&mid=2247484111&idx=1&sn=28ee87a886b7fda75fffa633f6d5997b&chksm=cf525abef825d3a840e8ab20ef05464490d3aec985d8d414a5ef21393bb9ee861992c4d9c637&token=32773786&lang=zh_CN#rd
