文本流，概括地說其實就是一系列字符，是文檔的讀取和輸出順序，也就是我們通常看到的由左到右、由上而下的讀取和輸出形式，在網頁中每個元素都是按照這個順序進行排序和顯示的，而position屬性可以將元素從文本流脫離出來顯示。

文檔流，英文原版文檔為"normal flow"，翻譯成常規流、普通流也就更好理解它了。

從直觀上理解，常規流指的是元素按照其在 HTML 中的位置順序決定排布的過程,主要的形式是自上而下（塊級元素）,一行接一行,每一行從左至右（行內元素）。

定位類型包括三種：

常規流：又包含三種類型:塊級元素的塊級格式、行內元素的行內格式以及兩種元素的相對定位方式。

浮動（float）

絕對定位（position:absolute/position:fixed）

?

W3C的文檔：
9.3 Positioning schemes

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

Normal flow. In CSS 2.1, normal flow includes block formatting of block-level boxes, inline formatting of inline-level boxes, and relative positioning of block-level and inline-level boxes.

Floats. 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.

Absolute positioning. 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.

1 脫離文檔流

所以說，脫離文檔流只有兩種情況，float和絕對定位。

1.1 浮動脫離文檔流

利用float脫離文檔流的時候，其他盒子元素會無視這個元素，但是其他盒子內的文字依然會為它讓出位子，環繞在其周圍，也就是說不脫離文本流。下面是在常規流中的代碼及效果（只展示body中的內容）：

?

<div class="outOfNormal">This is outofNormal content area. </div> <h2>normal contentnormal contentnormal contentnormal contentnormal content</h2> <p>This is normal content area.This is normal content area.This is normal content area.This is normal content area.</p>

?

CSS：

.outOfNormal{height: 200px;width: 220px;background-color: #000000;color:#FFFFFF;text-align:center;line-height:200px;overflow:hidden; }

效果圖：

?

給div加上浮動屬性之后：

.outOfNormal{height: 200px;width: 220px;background-color: #000000;color:#FFFFFF;text-align:center;line-height:200px;overflow:hidden;float:left; }

?

可以發現，div脫離了文檔流，h2元素和p元素都定位不到div，所以頂了上來。但是其中的文字卻還是定位在div的右邊，說明此時脫離了文檔流，并沒有脫離文本流。

但是值得注意的是，如果一個浮動元素的上一個元素也是浮動的，那么它會跟在上一個元素的后面。

1.2 絕對定位脫離文檔流（absolute）

將浮動改為絕對定位（absolute）：

.outOfNormal{height: 200px;width: 220px;background-color: #000000;color:#FFFFFF;text-align:center;line-height:200px;overflow:hidden;position:absolute; }

可以發現此時的文字也頂到最左側，忽略了div，脫離了文檔流同時也脫離了文本流。

1.2 絕對定位脫離文檔流（fixed）

再用position:fixed;試試：

.outOfNormal{height: 200px;width: 220px;background-color: #000000;color:#FFFFFF;text-align:center;line-height:200px;overflow:hidden;position:fixed; }

發現效果相同。

總結：也就是說使用float可以使元素脫離文檔流而不脫離文本流（元素無視它的存在，但是元素中的文字會圍繞在它周圍，但是不會脫離dom樹，用瀏覽器的審查元素就可以看到脫離文檔流的元素、），而使用絕對定位可以使元素脫離文檔流和文本流（元素和其中的文字都定位不到它的存在）。

參考：https://www.zhihu.com/question/24529373/answer/29135021

　　? https://www.zhihu.com/question/21911352

轉載于:https://www.cnblogs.com/xiaokeai0110/p/9184983.html

總結

以上是生活随笔為你收集整理的HTML 文档流和文本流的理解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。