什麼情況下會使元素脫離文件流

所謂的文件流，指的是元素排版布局過程中，元素會自動從左往右，從上往下的流式排列。並最終窗體自上而下分成一行行, 並在每行中按從左至右的順序排放元素。脫離文件流即是元素打亂了這個排列，或是從排版中拿走。

當前所知的脫離文件流的方式有兩種：浮動和定位。

先看一下定位。看一段對定位各個欄位的描述，有助於理解值描述

absolute

生成絕對定位的元素，相對於 static 定位以外的第乙個父元素進行定位。元素的位置通過「left」, 「top」, 「right」以及「bottom」屬性進行規定。

fixed

生成絕對定位的元素，相對於瀏覽器視窗進行定位。元素的位置通過「left」, 「top」, 「right」以及「bottom」屬性進行規定。

relative

生成相對定位的元素，相對於其正常位置進行定位。因此，「left:20」會向元素的 left 位置新增 20 畫素。

static

預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 宣告）。

inherit

規定應該從父元素繼承 position 屬性的值。

position的值為absolute、fixed的元素脫離文件流，static、relative沒有脫離文件流

結論：1.static定位不脫離文件流，設定left/top/right/bottom沒有作用，對margin/padding敏感。

2.父子節點都是沒有脫離文件的兩種定位（static、relative）的外邊距（margin）會合併，顯示效果以最大的那個外邊距為準。

float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於影象，使文字圍繞在影象周圍，不過在 css 中，任何元素都可以浮動。浮動元素會生成乙個塊級框，而不論它本身是何種元素。如果浮動非替換元素，則要指定乙個明確的寬度；否則，它們會盡可能地窄。

為什麼說浮動元素是脫離文件流的。

脫離文件流的元素有個標誌：沒有實際高度。

對於浮動屬性來說，位置屬性（left/top/right/bottom）是沒有用的。

浮動有點像玩俄羅斯方塊。向左浮動，方塊從右往左滑過來，如果某一行空間不夠（基於父容器的寬度），那麼這個塊會沿著最右邊的塊的下邊沿水平划過來，最後看卡到**就停止。

可以看到互動元素之間連線的部分是沒有空隙的。這是乙個很好的特性，可以用來做排列，精確到1px。

浮動元素不佔據高度，如果某個元素內部全是浮動元素，最後該元素也沒有高度，如果想要父元素內的浮動元素占有原來的高度，在父元素樣式中加入overflow：hidden即可。

對於浮動與定位的位置優先順序：

(fixed == absolute) > float > relative > static。理解為同時設定了position:absolute和float:right。忽略float:right。