目錄
- 一、概述
- 二、塊級元素和內聯元素
- 常見的塊級元素
- BFC
- 常見的行內元素
- IFC
三、哪些情況會脫離普通流
- 浮動
- 絕對定位
- 固定定位
- display:none
- 四、總結
- 五、參考資料
一、概述
普通流（normal flow，國內有人翻譯為文檔流）：將窗體自上而下分成一行一行,
塊級元素從上至下、 行內元素在每行中按從左至右的挨次排放元素,即為文檔流。
了解文檔流是css布局的基礎。雖然 普通流 很基礎， 但資料較少，之前對這個概念模糊，現總結如下，歡迎拍。
二、塊級元素和內聯元素
html元素根據普通流布局特性分為塊級元素（block）和內聯元素（inline）
塊級元素
塊級元素在布局的特性顯示為:獨占一行,下一個元素另起新行, 比如網頁的div標簽它默認占用的寬度位置是一整行，p標簽默認占用寬度也是一整行，因為div標簽和p標簽是塊狀對象。表現為以下特性：
- 處於常規流中時，如果 width 沒有設置，會自動填充滿父容器;
- 可以應用 margin/padding;
- 在沒有設置高度的情況下會擴展高度以包含常規流中的子元素;
- 處於常規流中時布局時在前后元素位置之間（獨占一個水平空間）;
- 忽略 vertical-align.
常見的塊級元素
塊級元素： p、h1、div、 ul、ol、li、 table、 form
display為block的元素
BFC
說到普通流塊的布局，不得不說BFC了，
關於BFC這篇文章（ http://www.w3ctech.com/topic/865 ）解釋的很清楚了。
總結來說，就是以下兩點：
BFC布局規則：
內部的Box會在垂直方向，一個接一個地放置。
- Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
- 每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。
- BFC的區域不會與float box重疊。
- BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
- 計算BFC的高度時，浮動元素也參與計算
哪些元素會產生BFC
- 根元素
- float屬性不為none
- position為absolute或fixed
- display為inline-block, table-cell, table-caption, flex, inline-flex
- overflow不為visible
內聯元素
內聯元素,表現為行內樣式,當當前行放不下的時候,再另起新行.表現為以下特性：
- 水平方向上根據 direction 依次布局;
- 不會在元素前后進行換行;
- 受 white-space 控制;
- margin/padding 在豎直方向上無效，水平方向上有效;
- width/height 屬性對非替換行內元素無效，寬度由元素內容決定;
- 非替換行內元素的行框高由 line-height 確定，替換行內元素的行框高;由 height , margin , padding , border 決定;
- 浮動或絕對定位時會轉換為 block;
- vertical-align 屬性生效
常見的內聯元素
input、 a、 img、 span
display為inline的元素
IFC
同樣相對BFC,行內元素有IFC
IFC布局規則
- 框會從包含塊的頂部開始，一個接一個地水平擺放。
- 擺放這些框的時候，它們在水平方向上的外邊距、邊框、內邊距所占用的空間都會被考慮在內。在垂直方向上，這些框可能會以不同形式來對齊：它們可能會把底部或頂部對齊，也可能把其內部的文本基線對齊。能把在一行上的框都完全包含進去的一個矩形區域，被稱為該行的行框。水平的margin、padding、border有效，垂直無效。不能指定寬高。
- 行框的寬度是由包含塊和存在的浮動來決定。行框的高度由行高計算這一章所描述的規則來決定。
詳細可查看：inline-formatting: http://www.w3.org/TR/CSS2/visuren.html#inline-formatting
三、哪些情況會脫離普通流
有三種情況將使得元素脫離文檔流而存在，分別是浮動，絕對定位， 固定定位,隱藏元素。
浮動
浮動元素不占任何正常文檔流空間， 而浮動元素的定位照樣基於正常的文檔流父級元素 ，然后從文檔流中抽出並盡能夠遠的挪動至左側或許右側。當一個元素脫離正常文檔流后，依然在文檔流中的其他元素將忽略該元素並填補其原先的空間。
但浮動元素，與行內元素相遇， 行內元素 並不會占用浮動元素的空間. 用浮動實現布局，父級元素 塌縮就是因為浮動元素不在正常流中。
The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it .
絕對定位
基於文檔流，理解以下的定位形式:
相對定位：元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。
絕對定位：即完全離開文檔流, 相關於position屬性非static值的比來父級元素進行偏移。
absolute：絕對定位。將對象從文檔流中拖出，使用left，right，top，bottom等屬性相對於其最接近的一個最有定位設置的父對象進行絕對定位。如果不存在這樣的父對象，則依據body對象。而其層疊通過z-index屬性定義
注：當只設置position:absolute,不設置 left，right，top，bottom時，元素的位置，還是在原來的位置。
CSS
<divclass="a">
<divclass="b">b</div>
<divclass="c">c</div>
</div>
HTML
.a
{
position:relative;
width:300px;
border:1px solid blue;
padding:3px;
}
.b,.c
{
height:50px;
border:1px solid red;
background-color:#eee;
}
.c
{
width:100%;
position:absolute;
/*top:0;*/
}
顯示效果如下：
當.c類加了top:0;顯示效果如下。
固定定位（fixed）
固定定位：即完全離開文檔流，相關於視區進行偏移。
對於定位要注意：
- 對於absolute和fixed定位的固定尺寸（設置了width和height屬性值）元素，如果設置了top和left屬性，那么設置bottom和right值就沒有作用了，應該是top和left優先級高，否則同時寫了瀏覽器怎么知道按照誰定位
- 對於absolute和fixed定位的元素，如果設置了top、left、bottom、right的值后margin屬性也就不起作用了
- 對於absolute和fixed定位的元素，如果設置了top、left、bottom、right的值后float屬性同樣會失效
塊元素如果設置了float屬性或者是absolute、fixed定位，那么vertical-align屬性不再起作用
隱藏元素
display:none
不在渲染樹中，肯定不在文檔流中。
diplay:none和visibility:hidden的區別:
- display :none 隱藏對應的元素，在文檔布局中不再給它分配空間，它各邊的元素會合攏，
就當他從來不存在。 脫離文檔流. - visibility:hidden
隱藏對應的元素，但是在文檔布局中仍保留原來的空間。不脫離文檔流.
四、總結
文檔流是css布局的基礎，以上簡單介紹了的文檔流的概念，根據文檔流元素的的分類，什么會脫離文檔流，和BFC等布局特性，可能會有錯誤，歡迎指正。
五、參考
[1].文檔流與div定位http://www.cnblogs.com/tim-li/archive/2012/07/09/2582618.html
[2].普通流http://www.w3.org/html/ig/zh/wiki/CSS2/visuren#block-formatting
[3].inline-formatting: http://www.w3.org/TR/CSS2/visuren.html#inline-formatting