absolute float 比較分析

同一:absolute-float 都脫離了文檔流,也就是默認狀況下,父盒子計算高度不包括 absolute/float 的元素

下例:

兩個 parentDiv,背景色:深海藍;邊框:1px紅色實線;父盒子裏面各包含一個 sonDiv ;

第一個 sonDiv 絕對定位,第二個 sonDiv 浮動定位;

兩個 parentDiv 都有 margin-bottom: 20px; 方便觀察,避免互相干擾;

示例：

代碼：

<div style="margin-bottom: 20px;">
    <div style="position: absolute;">sonDiv1-absolute</div>
</div>
<div style="margin-bottom: 20px;">
    <div style="float: left;">sonDiv2-float</div>
</div>

結論:absolute-float 元素都脫離了文檔流,且默認狀況下,父盒子計算高度不包括 absolute/float 的元素(若是父盒子裏有非absolute-float元素的話,父盒子天然會計算非absolute-float元素的高度)

---

同二: absolute-float 使元素寬高自適應

示例：

代碼：

<div style="position: absolute;border: 1px solid red;">sonDiv1-absolute</div>    
<div style="float: left;margin-top:25px;border: 1px solid red;">sonDiv2-float</div>    
<div style="margin-top:50px;border: 1px solid red;">sonDiv3-normal</div>

你們能夠看到,三個盒子都沒有設置寬度,前面兩個 absolute/float 盒子 div 寬度自動等於內容寬度了,而第三個普通的 div 就是獨佔一行,典型的塊級元素特徵;

結論:absolute-float 使元素寬高自適應

---

異一:脫離文檔流不一樣

脫離文檔流的區別1: absolute 的元素好像沒有辦法讓 parentDiv 計算他的高度,不過float能夠,只要給 float 元素的 parentDiv 加上 overflow:hidden 就行;

給他們的 parentDiv 都加上 overflow:hidden

示例：

代碼：

<div style="overflow: hidden;margin-bottom: 20px;">
    <div style="position: absolute;">sonDiv1-absolute</div>
</div>
<div style="overflow: hidden;margin-bottom: 20px;">
    <div style="float: left;">sonDiv2-float</div>
</div>

結論:經過給 float 元素的 parentDiv 設置 overflow:hidden ,可讓父元素把 sonDiv 的高度計算在內,可是 absolute 不行

---

脫離文檔流的區別2:

(1) absolute 脫離了文檔流,後面的普通盒子會忽視他,並且還會忽視他裏面的內容(在這裏就是後面的普通元素會忽略 absolute 的 div ,也會忽略 div 裏面的文字)

方便示例,我們把兩個第一個 parentDiv 的 margin-bottom: 20px; 去掉,第二個 sonDiv 的 float 也去掉, parentDiv 的 overflow 也去掉;

示例：

代碼：

<div style="overflow: hidden;">
    <div style="position: absolute;">sonDiv1-absolute</div>
</div>
<div style="overflow: none;margin-bottom: 20px;">
    <div style="float: none;">sonDiv2-float:none</div>
</div>

結論: absolute 脫離了文檔流,後面的普通盒子會忽視他,並且還會忽視他裏面的內容

補充: absolute 脫離了文檔流,後面的浮動盒子也會忽視他,並且還會忽視他裏面的內容;固然後面的盒子若是也是 absolute 的,固然就不會忽視了,這個很好理解,同級嘛,不解釋

示例:給第二個盒子設置 float , parentDiv 加上 overflow ;後面再加一個盒子, sonDiv3 設置 absolute

示例：

代碼：

<div style="overflow: hidden;">
    <div style="position: absolute;">sonDiv1-absolute</div>
</div>
<div style="overflow: hidden;">
    <div style="float: left;">sonDiv2-float:left</div>
</div>
<div style="overflow: hidden;margin-bottom: 20px;">
    <div style="position: absolute;">sonDiv3-absolute</div>
</div>

結論: absolute 脫離了文檔流,後面的普通､浮動盒子都會忽視他,並且還會忽視他裏面的內容,只有同級的 absolute 元素不會忽略他

---

(2) float 元素脫離了文檔流且他的父盒子沒有設置 overflow: hidden; ,後面的普通盒子會忽視他,但不會忽視他裏面的內容(在這裏就是後面的普通元素會忽略 float 的 div ,可是不會忽略 div 裏面的文字)

示例：

代碼：

<div style="overflow: none;">
    <div style="float: left;">sonDiv2-float:left</div>
</div>
<div style="margin-bottom: 20px;">
    <div style="position: none;">sonDiv1-absolute-none</div>
</div>

你看,這裏普通盒子 sonDiv1 就忽視了 float 的 sonDiv2 的盒子(由於他自身 float ,且他的父盒子沒有設置 overflow: hidden; ),可是呢,很明顯 sonDiv1 盒子裏的文字看到了 float 的 sonDiv2 盒子裏的內容,因此沒有直接蓋過去,反而讓出了位置｡｡｡

仔細分析的話,這裏其實出現了4處變化!

• 1. sonDiv2 的 parentDiv 因爲 sonDiv2 的 float:left 出現了坍縮,忽略了sonDiv2 的盒子和內容,因此 sonDiv2 的 parentDiv 只剩下了兩根1px的紅色邊框,背景色天然也看不見了;
• 2.因爲上面的盒子 sonDiv2 的 float:left ,致使後面的普通元素, sonDiv1 和他的 parentDiv 就忽略了這個盒子的存在,直接頂上去了,頂到 sonDiv2 的 parentDiv (也就是2px的紅色邊框),那麼這裏 sonDiv1 的 parentDiv 邊框是1px紅色,加上前面的 2px ,因此致使最上面有 3px 的紅色邊框啦;
• 3.同時 sonDiv1 和他的 parentDiv 的總體上移( sonDiv1 的 parentDiv 的背景色固然一塊兒上移啦),給 sonDiv2 的 parentDiv 形成了有背景色的假象!其實這個背景色是 sonDiv1 的 parentDiv 的!
• 4.按道理呢, sonDiv1 的文字也是一塊兒上移的,但是呢, sonDiv1 的文字也就是內容,看到了上面 float:left 盒子 sonDiv2 的內容!!!因此他就沒有蓋上去,而是自覺的讓出了位置,跟在前面內容的後面了!!!
• 可能你們也注意到了, sonDiv2 的文字要比 sonDiv1 的高一點點,這就是 1px 的邊框哦,由於 sonDiv2 頂着他 parentDiv 的 2px 邊框,而 sonDiv1 頂着 3px 的邊框哦(不明白,請看第2條)

那麼若是給 float 元素的 parentDiv 加上 overflow: hidden; 呢?天然就變正常啦, parentDiv 被撐起來,後面的普通盒子也能正常看到, float 元素的 parentDiv 啦

示例：

代碼：

<div style="overflow: hidden;">
    <div style="float: left;">sonDiv2-float:left</div>
</div>
<div style="margin-bottom: 20px;">
    <div style="position: none;">sonDiv1-absolute-none</div>
</div>

結論: float 元素脫離了文檔流且父盒子沒有設置 overflow: hidden; ,後面的普通盒子會忽視他,但不會忽視他裏面的內容;若是他的父盒子設置 overflow: hidden;,那麼後面的普通盒子就不會忽視他,注意此時設置了 overflow: hidden; 的父盒子也會變成高度自適應哦(寬度好像也是, float 元素有多寬高,父盒子就被撐多寬高)~

我們繼續引伸下去,float 元素,若是他的父盒子沒有設置 overflow: hidden; ,且後面跟着的不是普通盒子,而是 absolute 盒子,狀況會怎麼樣呢?

示例:

代碼：

<div style="overflow: none;">
    <div style="float: left;">sonDiv2-float:left</div>
</div>
<div style="margin-bottom: 20px;">
    <div style="position: absolute;">sonDiv1-absolute-none</div>
</div>

結論: float 元素脫離了文檔流且父盒子沒有設置 overflow: hidden; ,後面的 absolute 盒子會忽視他這個盒子,並且會忽視他裏面的內容(在這裏就是後面的 absolute 元素會忽略 float 元素的 div 和裏面的文字,直接蓋上去!!!)

那麼若是 給 float 元素的 parentDiv 設置 overflow:hidden; 呢?我們來試試!

示例：

代碼：

<div style="overflow: hidden;">
    <div style="float: left;">sonDiv2-float:left</div>
</div>
<div style="margin-bottom: 20px;">
    <div style="position: absolute;">sonDiv1-absolute-none</div>
</div>

這下恢復正常啊,與後面跟着普通盒子無差,固然後面盒子的背景色沒了,這個 absolute 盒子自身的問題;

結論:float 元素脫離了文檔流且父盒子沒有設置 overflow: hidden; 後面的普通盒子會忽視他,但不會忽視他裏面的內容; absolute 盒子則會忽視盒子和內容; float 元素脫離了文檔流且父盒子設置了 overflow: hidden; 則後面的普通盒子和 absolute 盒子都會看到 float 元素父盒子的存在

對了,這裏還沒說若是後面的元素是 float 元素呢,,,不過這個應該簡單,同級的嘛,即便 float 元素脫離了文檔流且父盒子沒有設置 overflow: hidden;,後面的 float 元素也會看到的,且條件容許的話,會和前面的 float 元素共處一行哦

示例：

代碼：

<div style="overflow: none;">
    <div style="float: left;">sonDiv2-float:left</div>
</div>
<div style="margin-bottom: 20px;">
    <div style="float: left;border:1px solid green">sonDiv1-absolute-none</div>
</div>

都是 float 元素,同級嘛,父元素都忽視了,因此就並排了(注意哦,後一個 float 元素看到了前一個 float 元素的盒子哦,不單單是隻看見了內容哦,不信?我給後面一個 float 元素加了邊框吶!你看後面一個 float 元素的邊框並無蓋到第一個 float 元素去,而是頂在第一個 float 元素的邊界),至於高度不同,由於第一個盒子 sonDiv2 頂着父盒子坍縮致使的 2px 邊框,而第二個盒子 sonDiv1 頂着2個父盒子坍縮致使的 4px 邊框和本身的 1px 邊框,因此高度天然不同啦;那麼咱們再給第一個 float 元素的父盒子加上 overflow: hidden; 看看

示例：

代碼：

<div style="overflow: hidden;">
    <div style="float: left;">sonDiv2-float:left</div>
</div>
<div style="margin-bottom: 20px;">
    <div style="float: left">sonDiv1-absolute-none</div>
</div>

又是挺正常的嘛,因此我們來總結下:

結論:float 元素脫離了文檔流且父盒子沒有設置 overflow: hidden; 後面的普通盒子會忽視他,但不會忽視他裏面的內容; absolute 盒子則會忽視盒子和內容; float 盒子則都不會忽視; float 元素脫離了文檔流且父盒子設置了 overflow: hidden; 則後面的普通盒子､ absolute 盒子和 float 盒子都會看到 float 元素父盒子的存在

插播一句,position:fixed 跟 absolute 比較像,也脫離文檔流,不過沒細分析;可是 position:relative 好像並無脫離文檔流~~

---

最後把異同總結下: absolute/float 元素定位異同:

• 同1:absolute-float 都脫離了文檔流,也就是默認狀況下,父盒子計算高度不包括 absolute/float 的元素

  ---

• 同2:absolute-float 使元素寬高自適應

  ---

• 異1:脫離文檔流的區別1: absolute 的元素好像沒有辦法讓 parentDiv 計算他的高度,不過float能夠,只要給 float 元素的 parentDiv 加上 overflow:hidden 就行;

  ---

• 異1:脫離文檔流的區別2: absolute 脫離了文檔流,後面的普通､浮動盒子都會忽視他,並且還會忽視他裏面的內容,只有同級的 absolute 元素不會忽略他;float 元素脫離了文檔流且父盒子沒有設置 overflow: hidden; 後面的普通盒子會忽視他,但不會忽視他裏面的內容; absolute 盒子則會忽視盒子和內容; float 盒子則都不會忽視; float 元素脫離了文檔流且父盒子設置了 overflow: hidden; 則後面的普通盒子､ absolute 盒子和 float 盒子都會看到 float 元素父盒子的存在,且設置了 overflow: hidden; 的父盒子也會變成高度自適應(寬度好像也是, float 元素有多寬高,父盒子就被撐多寬高)~

 

行文倉促,若有錯誤,歡迎批評指正~~~