文件流：將窗體自上而下分成一行一行，並在每行中按從左至右的挨次排放元素,即為文件流。
我們在排列元素時，遵循"流式結構"，即元素遵循從上向下，從左向右堆疊的規則，所以我們在排列元素時如果每行從左往右的元素的總寬度大於視窗的寬度時，就會預設換行。
有三種狀況將使得元素離開文件流而存在,分別是浮動、絕對定位、固定定位。
浮動時，離開文件流後的元素，不占用文件流的空間，不會被文件流中的元素發現，離開文件流元素後面的還在文件流上元素會自動上來填補位置接上文件流。此時，離開文件流的元素如同浮在文件流（平面）的上層，而我們正常**的效果是俯檢視的效果，其實二者如同是分離的，不在同一平面。看一段**：
效果圖如下：
purple色塊前面的空隙被文件流中藍色塊填補上了。
再來看看這部分**:
這裡我去掉了浮動元素的margin內容，效果圖如下：這裡，發現藍色塊不見了，其實它只是在紫色塊的下方，俯視角看下去好像不見了，我將藍色塊的長寬變大些就看的很清楚了：
到這裡，就驗證得很清楚了。
但是這裡需要注意一點的是（這一點我只是知道，我也不清楚為何會這樣，如果你知道，希望不吝賜教），舉個例子，看**：
.box1這裡文件流上的藍色塊有個上邊距50px的屬性值，按道理會呈現紫色塊會覆蓋藍色塊一般面積，但實際效果圖如下:.box2
紫色塊依然覆蓋藍色塊，並且紫色塊與藍色塊一起實現上邊距50px;這裡的效果是藍色塊（以自身塊面積，不包括邊距）依然填補了紫色塊在文件流中的空隙，並且藍色塊的邊距屬性也對浮動的紫色塊有效果，使紫色塊產生了邊距。
此外，要說的一點是浮動的元素之間也遵循流式結構，也遵循margin與paddng的位置調整。
說到這裡再理解絕對定位與相對定位，就容易的多，絕對定位脫離文件流，它可以實現定位位置覆蓋在其他元素空間之上（可以任意定位）,相對定位產生時有移動的座標基點（左上頂點），其依靠top,left,bottom,right移動的距離空間不會消失，會一直存在，占用文件流的空間。固定定位脫離文件流，以視窗為基準參照。
瀏覽器渲染頁面過程
今天在某論壇上看到這麼乙個問題。現在頁面有個空div，我用js向裡面插入一段html,然後獲取div的高度，發現有時候得到的div的高度不準確，請問各位有什麼方法解決一下。那麼為了更好的理解這個問題，咱們今天來聊聊瀏覽器的渲染過程 解析html 解析css 構建render tree 布局 layo...
瀏覽器頁面渲染流程
渲染流水線中css和js的載入 相關概念 html css js資料通過渲染模組的處理最終輸出為螢幕上的畫素 渲染模組被劃分為很多子階段，輸入的資料通過這些子階段最後輸出畫素，這樣的乙個處理流程叫做渲染流水線 注意 每個子階段都有其輸入內容 處理過程和輸出內容 因為瀏覽器無法直接理解和使用html，...
瀏覽器渲染頁面過程
一 瀏覽器載入和渲染html的順序 二 js的載入 3 因為瀏覽器的載入是從上到下一行一行的載入的，所以如果頁面同事定義了兩個相同命名的js函式，後面的函式會覆蓋前面的函式。三 html頁面載入和解析流程 四 domcontentloaded事件 domcontentloaded事件在許多webki...