css脫離文檔流到底是什麼意思，脫離文檔流就不佔據空間了嗎？脫離文檔流是不是指該元素從dom樹中脫離？

01-14

先引用一段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.

來源：Visual formatting model

Q: 脫離文檔流就不佔據空間了嗎？

A: 可以這麼說。更準確地一點說，是一個元素脫離文檔流（out of normal flow）之後，其他的元素在定位的時候會當做沒看見它，兩者位置重疊都是可以的。

Q: 脫離文檔流是不是指該元素從dom樹中脫離？

A: 不是，用瀏覽器的審查元素就可以看到脫離文檔流的元素（例如被float了）依然會出現在dom樹里，下面的截圖裡也可以看到。

那麼脫離文檔流是什麼樣子的呢？下面是上鎚子的時間~ 以前面文檔里寫的三種布局方式為例

下文中文檔的HTML代碼如下：

& & Out of normal: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi esse impedit autem praesentium magni culpa, amet corporis, veniam consequatur voluptates temporibus. Voluptates eius similique asperiores cupiditate fugit hic atque quisquam? & &Normal Content& &Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum praesentium nam tempora beatae quis nobis laboriosam alias aliquid, tenetur exercitationem. Odio, aperiam, illo! Eveniet natus dignissimos architecto velit eligendi id!& &Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem reprehenderit velit nam delectus distinctio at unde aliquid officia illo, tempore vitae et incidunt non, ut eos nesciunt quaerat. Enim, minus.& &

CSS代碼如下，為了看得更清楚，加一個padding

#outofnormal { width: 200px; background-color: cyan; padding: 10px; }

首先普通情況下（也就是在normal flow里）是這樣的

要被玩的div：

跟在後面的h2：

可以看到兩者是垂直排列，padding互相頂著。3D視圖的話就是這樣，大家排排坐：

第二種情況：

加上float:left了之後，藍色的div就脫離文檔流了，變成了這樣：

因為藍色的div脫離了文檔流，跟在後面的h2和p的盒子都當做沒看到這個div的樣子去定位，所以他們都頂著瀏覽器左邊和頂部的邊框。但是有趣的是，h2和p裡面的文本（屬於content flow）卻都看到了這個被float的div，在自己的盒子里往右推，飄到了藍色div的邊上。這就是float的特性，其他盒子看不見被float的元素，但是其他盒子里的文本看得見。

3D視圖的話就是這樣。我插~

我插~

為什麼能插呢？因為藍色div被旁邊的盒子無視了呀~

第三種情況：absolute positioning。

刪掉float: left，加上postion: absolute。和float一樣的是，旁邊的盒子無視了藍色div的存在，也是頂著左邊邊框定位。但是~ 文本也無視了藍色div的存在，頂著左邊邊框定位！

3D視圖下也是成功無視之，插入~

總結：

脫離文檔流，也就是將元素從普通的布局排版中拿走，其他盒子在定位的時候，會當做脫離文檔流的元素不存在而進行定位。需要注意的是，使用float脫離文檔流時，其他盒子會無視這個元素，但其他盒子內的文本依然會為這個元素讓出位置，環繞在周圍。而對於使用absolute
positioning脫離文檔流的元素，其他盒子與其他盒子內的文本都會無視它。

脫離文檔流是不是指該元素從dom樹中脫離?

我們知道瀏覽器繪製DOM樹時是按照元素在html文檔中出現的順序繪製出的，這裡是針對所有的元素，是不區分normal flow或者是float、absolute的。所有的節點都會出現在DOM中

1、什麼是文檔流？

在窗口自上而下分成一行行, 並在每行中按從左至右的順序排放元素,即為文檔流.

(自己的理解是從頭到尾按照文檔的順序，該在什麼位置就在什麼位置，也可以按照上面的意思理解，自上而下，自左到右的順序)。

2、脫離文檔流

CSS中脫離文檔流，也就是將元素從普通的布局排版中拿走，其他盒子在定位的時候，會當做脫離文檔流的元素不存在而進行定位。

3、脫離文檔流就不佔據空間了嗎？

是的，它已經不屬於文檔流的範疇中，相當於自定義排位。就相當於它可以不用再排隊了，想去哪裡就去哪裡。

4、脫離文檔流是不是指該元素從dom樹中脫離？

並沒有。我覺得你會問這個問題是沒弄清楚什麼是dom樹

什麼是dom樹了？

文檔樹（Document Tree）是HTML頁面的層級結構。

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

而dom樹則是結構。

dom樹和文檔流有什麼差異了？

結構和位置顯然是兩種不同的東西。

所謂層級結構是指那些元素與元素之間的關係，

包裹我的是我的父集，與我並列的是我的兄弟集，被我包裹的是我的子集，

類似這樣的關係稱之為層級結構。

而文檔流則類似於排隊，我本應該在隊伍中的，然而我脫離了隊伍，但是我與我的父親，兄弟，兒子的關係還在。