那麼所謂的文件流（normal flow，也被稱為「普通流」），指的是就是元素排版布局過程中，元素會自動從左往右，從上往下地遵守這種流式排列方式。
當瀏覽器渲染html文件時，從頂部開始開始渲染，為元素分配所需要的空間，每乙個塊級元素單獨佔一行，行內元素則按照順序被水平渲染直到在當前行遇到了邊界，然後換到下一行的起點繼續渲染。那麼此時就不得不說一下塊級元素和行內元素。
塊級元素：顧名思義，這個元素是「一塊」，那麼作為乙個塊，它就應該有自己的寬度和高度。而且它比較霸道，每個塊級元素預設佔一行高度，一行內新增乙個塊級元素後無法一般無法新增其他元素（float浮動後除外），一般作為容器使用，常見的塊級元素有：from、select、 textarea、h1-h6 、table 、button 、hr 、p 、ol 、ul等。
結合以上內容，塊級元素擁有以下特點：
1.每個塊級元素都是獨自佔一行。
2.元素的高度、寬度、行高和邊距都是可以設定的。
3.元素的寬度如果不設定的話，預設為父元素的寬度。
行內元素：顯然，這種元素存在於一行內，且能與別的行內元素共同享有一行。常見的行內元素有：span、input、a、em、strong、b、br、img、select、button等。
那麼行內元素擁有的特點如下：
1.每乙個行內元素可以和別的行內元素共享一行，相鄰的行內元素會排列在同一行裡，直到一行排不下了，才會換行。
2.行內元素設定width, height無效（此處有坑，請往下看），寬度隨元素的內容而變化。
3.行內水平方向的padding-left和padding-right都會產生邊距效果，但是豎直方向上的padding-top和padding-bottom都不會產生邊距效果。
細心的大家肯定發現了，像
行內元素也分為兩種：替換元素和非替換元素。
替換元素：
瀏覽器根據元素的標籤和屬性，來決定其的具體顯示內容的元素，常見的有：
非替換元素：
內容直接表現給使用者端的元素稱為成為非替換元素，常見的有：、、等。例如，它會將開始和結束標籤中的內容直接在瀏覽器上展示出來。
四、脫離文件流
所謂脫離文件流，即將元素從普通的布局排版（普通文件流）中脫離出來，其他盒子在定位的時候，會當做沒看到它（餘生你不必再指教了），兩者位置重疊都是可以的，但是依然在dom樹中存在。
那麼會使元素脫離文件流的情況有哪些呢？
1.float產生的浮動
使用float脫離文件流時，雖然其他盒子會無視這個元素，但其他盒子內的文字依然會為這個元素讓出位置，環繞在該元素的周圍。
2.position:absolute;
absolute是絕對定位，絕對定位的元素以第乙個非static父元素為參照。如果沒有非static的父元素，則以body為參照。
3.position:fixed;
完全脫離文件流，相對於瀏覽器視窗進行定位，也就是這個div固定在瀏覽器視窗上了，不論我們怎麼拖動滾動條都無法改變它在瀏覽器視窗的位置
HTML頁面中的文件流以及脫離文件流
一 文件流 在我們生活中，有各種各樣的 流 有電流 水流等，就像水流從高處往低處流一樣，我們可以把文件流想象成html元素在瀏覽器上 流動 瀏覽器的頂端就是河流的源頭，瀏覽器的底部就是河流的盡頭。如下圖 而所謂的文件流 normal flow，也被稱為 普通流 指的是就是元素排版布局過程中，元素會自...
HTML文件流 文字流和脫離文件流
文件流 普通流 在文件流中，html 元素會按照其在 html文件中的位置順序來排布,將窗體自上而下分成一行一行,並在每行中左至右的挨次排放行內元素，遇到阻礙或者寬度不夠自動換行。而塊狀元素將獨佔一行。塊級元素和行內元素.文字流 文字流是相對於文字段落講的。可視為一串字元由左到右 由上而下的讀取和輸...
認識html文件流
寫html，css的同學應該需要清楚什麼是文件流。文件流 將窗體自上而下分成一行一行,並在每行中按從左至右的挨次排放元素,即為文件流。每個非浮動塊級元素都獨有一行,浮動元素則按規則浮在行的一端.若當時行容不下,則另起新行再浮動。內聯元素也不會獨有一行.一切元素 包括塊級,內聯和列表元素 均可生成子行...