所謂脫離文檔流，即將元素從普通的佈局排版中拿走，其他盒子在定位的時候，會當沒看到它，兩者位置重疊都是可以的。這裏，通過講解浮動脫離文檔流（float）和絕對定位脫離文檔流（position:absolute）的區別，讓大家對這一概念有更深的認識。
一、浮動脫離文檔流
使用float脫離文檔流時，其他盒子會無視這個元素，但其他盒子內的文本依然會爲這個元素讓出位置，環繞在周圍。
我們先利用下面代碼在普通流中看一下效果，方便對比：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style>
#outofnormal {
width: 200px;
background-color: cyan;
padding: 10px;
}
</style>
</head>
<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>
</html>
在普通流的效果如下：
然後給藍色的盒子outofnormal加上左浮動：
#outofnormal {
width: 200px;
background-color: cyan;
padding: 10px;
float: left;
}顯示結果如下：
浮動之後，藍色的div就脫離了文檔流，跟在後面的h2和p的盒子都當做沒看到這個div的樣子去定位，所以他們都頂着瀏覽器左邊和頂部的邊框。但是有趣的是，h2和p裏面的文本，卻都看到了這個被float的div，在自己的盒子裏往右推，飄到了藍色div的邊上。這就是float的特性，其他盒子看不見被float的元素，但是其他盒子裏的文本看得見。
二、絕對定位脫離文檔流
將float: left;改爲position:absolute
#outofnormal {
width: 200px;
background-color: cyan;
padding: 10px;
position:absolute;
}顯示結果如下：
看到這裏，有發現與浮動脫離文檔流的不同之處嗎？相信聰明的你已經發現了，設置了絕對定位後，不僅是旁邊的其他盒子無視藍色div的存在，連盒子裏的文本也無視了藍色div的存在，頂着左上邊框定位！
三、總結
使用float脫離文檔流時，其他盒子會無視這個元素，但其他盒子內的文本依然會爲這個元素讓出位置，環繞在周圍。
而對於使用absolute :position脫離文檔流的元素，其他盒子與其他盒子內的文本都會無視它。
