一、文件流
在我們生活中，有各種各樣的「流」，有電流、水流等，就像水流從高處往低處流一樣，我們可以把文件流想象成html元素在瀏覽器上「流動」。瀏覽器的頂端就是河流的源頭，瀏覽器的底部就是河流的盡頭。 如下圖
而所謂的文件流（normal flow，也被稱為「普通流」），指的是就是元素排版布局過程中，元素會自動從上往下，從左往右地遵守這種流式排列方式。
當瀏覽器渲染html文件時，從頂部開始渲染，為每個元素分配所需要的空間，遇到塊級元素則放置在一行，行內元素則被水平放置直到在當前行遇到邊界，然後從下一行起點繼續渲染。
從這裡就引出了兩個不同的概念：塊級元素和行內元素（內聯元素）。那麼什麼是塊級元素和行內元素？
可以看另一片文章css中的塊級元素、行內元素和行內塊元素
二、脫離文件流
脫離文件流說的是將元素從普通文件流中脫離出來，而其他沒脫離的元素會當其不存在，仍按照給定的位置進行定位，也可以與脫離文件流元素重疊。
那麼，引起元素脫離文件流的情況有哪些呢？
1、float浮動
設定浮動float可使元素脫離文件流，其他盒子會無視這個元素，但其他盒子內的文字依然會為這個元素讓出位置，環繞在該元素的周圍。 所以很多時候可以用來實現文字環繞效果。
css：
.demo1
.demo2
demo1
demo2終於知道愛都有翅膀，怎麼擁抱他總要飛翔
2、position：absolute絕對定位
絕對定位元素完全脫離文件流，它相對於最近的非 static（relative/absolute/fixed） 祖先元素定位。當這樣的祖先元素不存在時，則相對於icb（inital container block, 初始包含塊）。而根元素所在的包含塊就叫初始包含塊（icb），所以也就是說當絕對定位的元素沒有非 static定位屬性的父元素時，相對於icb定位。根元素的包含塊一般是視口（連續**）或者由頁面區域（paged media）。
3、position：fixed固定定位
固定定位相對於可視視窗（瀏覽器視窗）進行定位，它完全脫離文件流，即使頁面滾動條滾動都無法改變它的位置。
HTML文件流 文字流和脫離文件流
文件流 普通流 在文件流中，html 元素會按照其在 html文件中的位置順序來排布,將窗體自上而下分成一行一行,並在每行中左至右的挨次排放行內元素，遇到阻礙或者寬度不夠自動換行。而塊狀元素將獨佔一行。塊級元素和行內元素.文字流 文字流是相對於文字段落講的。可視為一串字元由左到右 由上而下的讀取和輸...
css脫離文件流html元素位置控制
舉個簡單的例子，脫離文件流就相比我們上學時，將戶口遷移到學校，家鄉沒有留我們的戶口和位置。沒有脫離文件流就相當於，我們雖然走了，但是我們的戶口和位置還在原來的戶籍所在地。html頁面元素類似，沒有脫離文件流的元素會按原來的塊級元素 行內元素來進行排列劃分。脫離文件流的元素排列就不受原來的劃分規則制約...
float,absolute脫離文件流的總結
dom元素脫離文件流，有如下幾種方式 1.float 脫離文件流，其他dom元素無視他，在其下方布局，但是其未脫離文字流，其他元素的文字會認為他存在，環繞他布局。父元素會無視他，因此無法獲取其高度，這也就是浮動元素父元素高度塌陷的原因。下面是乙個例子 特別注意的是，浮動元素後面元素的文字雖然對浮動元...