CSS佈局之脫離文件流詳解——浮動、絕對定位脫離文件流的區別
阿新 • • 發佈：2019-02-17
所謂脫離文件流，即將元素從普通的佈局排版中拿走，其他盒子在定位的時候，會當沒看到它，兩者位置重疊都是可以的。這裡，通過講解浮動脫離文件流（float）和絕對定位脫離文件流（position:absolute）的區別，讓大家對這一概念有更深的認識。
一、浮動脫離文件流
使用float脫離文件流時，其他盒子會無視這個元素，但其他盒子內的文字依然會為這個元素讓出位置，環繞在周圍。
我們先利用下面程式碼在普通流中看一下效果，方便對比：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title 在普通流的效果如下：
然後給藍色的盒子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脫離文件流的元素，其他盒子與其他盒子內的文字都會無視它。