作者：張秋怡
鏈接：http://www.zhihu.com/question/24529373/answer/29135021
來源：知乎
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
鏈接：http://www.zhihu.com/question/24529373/answer/29135021
來源：知乎
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
Q: 脫離文檔流就不占據空間了嗎？
A: 可以這么說。更准確地一點說，是一個元素脫離文檔流（out of normal flow）之后，其他的元素在定位的時候會當做沒看見它，兩者位置重疊都是可以的。
Q: 脫離文檔流是不是指該元素從dom樹中脫離？
A: 不是，用瀏覽器的審查元素就可以看到脫離文檔流的元素（例如被float了）依然會出現在dom樹里，下面的截圖里也可以看到。
那么脫離文檔流是什么樣子的呢？下面是上錘子的時間~ 以前面文檔里寫的三種布局方式為例
下文中文檔的HTML代碼如下：
CSS代碼如下，為了看得更清楚，加一個padding
首先普通情況下（也就是在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脫離文檔流的元素，其他盒子與其他盒子內的文本都會無視它。
A: 可以這么說。更准確地一點說，是一個元素脫離文檔流（out of normal flow）之后，其他的元素在定位的時候會當做沒看見它，兩者位置重疊都是可以的。
Q: 脫離文檔流是不是指該元素從dom樹中脫離？
A: 不是，用瀏覽器的審查元素就可以看到脫離文檔流的元素（例如被float了）依然會出現在dom樹里，下面的截圖里也可以看到。
那么脫離文檔流是什么樣子的呢？下面是上錘子的時間~ 以前面文檔里寫的三種布局方式為例
下文中文檔的HTML代碼如下：
<body> <div id="outofnormal"> 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? </div> <h2>Normal Content</h2> <p>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!</p> <p>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.</p> </body> #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脫離文檔流的元素，其他盒子與其他盒子內的文本都會無視它。