css中脫離文件流解惑
先來了解一下block元素和inline元素在文件流中的排列方式。
block元素通常被現實為獨立的一塊，獨佔一行，多個block元素會各自新起一行，預設block元素寬度自動填滿其父元素寬度。block元素可以設定width、height、margin、padding屬性；
inline元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裡，直到一行排列不下，才會新換一行，其寬度隨元素的內容而變化。inline元素設定width、height屬性無效。inline元素的margin和padding屬性。水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果。
- 常見的塊級元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
- 常見的內聯元素有span、a、strong、em、label、input、select、textarea、img、br等
脫離文件流，也就是將元素從普通的佈局排版中拿走，其他盒子在定位的時候，會當它不存在而進行定位。
~~~~ 只有絕對定位absolute和浮動float才會脫離文件流~~~
注意：使用float脫離文件流時，其他盒子會無視這個元素，但其他盒子內的文字依然會為這個元素讓出位置，環繞在周圍(部分無視
使用absolute position脫離文件流的元素，其他盒子與其他盒子內的文字都會無視它。(完全無視)
那麼，
Q:
脫離文件流就不佔據空間了嗎？
A: 可以這麼說。更準確地一點說，是一個元素脫離文件流（out of normal flow）之後，其他的元素在定位的時候會當做沒看見它，兩者位置重疊都是可以的。
Q: 脫離文件流是不是指該元素從dom樹中脫離？
A: 不是，用瀏覽器的審查元素就可以看到脫離文件流的元素（例如被float了）依然會出現在dom樹裡，下面的截圖裡也可以看到。
==================================================================================
來源：http://www.cnblogs.com/allensun-193/p/5494610.html
脫離文件流是什麼樣子的呢？
以三種佈局方式為例
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脫離文件流的元素，其他盒子與其他盒子內的文字都會無視它。