浮動、絕對定位脫離文件流的區別

南城夏季發表於2018-04-01

所謂脫離文件流，即將元素從普通的佈局排版中拿走，其他盒子在定位的時候，會當沒看到它，兩者位置重疊都是可以的。這裡，通過講解浮動脫離文件流（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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

在普通流的效果如下： 
這裡寫圖片描述

然後給藍色的盒子outofnormal加上左浮動：

#outofnormal {
    width: 200px;
    background-color: cyan;
    padding: 10px;
    float: left;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

顯示結果如下：

這裡寫圖片描述

浮動之後，藍色的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;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

顯示結果如下：

這裡寫圖片描述

看到這裡，有發現與浮動脫離文件流的不同之處嗎？相信聰明的你已經發現了，設定了絕對定位後，不僅是旁邊的其他盒子無視藍色div的存在，連其他盒子裡的文字也無視了藍色div的存在，頂著左上邊框定位！

三、總結

使用float脫離文件流時，其他盒子會無視這個元素，但其他盒子內的文字依然會為這個元素讓出位置，環繞在周圍。 

而對於使用absolute :position脫離文件流的元素，其他盒子與其他盒子內的文字都會無視它。

參考連結：http://www.zhihu.com/question/24529373/answer/29135021

相關文章