前端必須瞭解的佈局常識：普通流（normal flow）

目錄

• 1、概述
• 2、塊級元素和內聯元素
  • 常見的塊級元素
  • BFC
  • 常見的行內元素
  • IFC
3、哪些狀況會脫離普通流
• 浮動
• 絕對定位
• 固定定位
• display:none
• 4、總結
• 5、參考資料

---

1、概述

普通流（normal flow，國內有人翻譯爲文檔流）：將窗體自上而下分紅一行一行,
塊級元素從上至下、 行內元素在每行中按從左至右的挨次排放元素,即爲文檔流。
瞭解文檔流是css佈局的基礎。雖然 普通流 很基礎， 但資料較少，以前對這個概念模糊，現總結以下，歡迎拍。

2、塊級元素和內聯元素

html元素根據普通流佈局特性分爲塊級元素（block）和內聯元素（inline）

塊級元素

塊級元素在佈局的特性顯示爲:獨佔一行,下一個元素另起新行, 好比網頁的div標籤它默認佔用的寬度位置是一整行，p標籤默認佔用寬度也是一整行，由於div標籤和p標籤是塊狀對象。表現爲如下特性：

• 處於常規流中時，若是 width 沒有設置，會自動填充滿父容器;
• 能夠應用 margin/padding;
• 在沒有設置高度的狀況下會擴展高度以包含常規流中的子元素;
• 處於常規流中時佈局時在先後元素位置之間（獨佔一個水平空間）;
• 忽略 vertical-align.

常見的塊級元素

塊級元素： p、h一、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佈局規則

1. 框會從包含塊的頂部開始，一個接一個地水平擺放。
2. 擺放這些框的時候，它們在水平方向上的外邊距、邊框、內邊距所佔用的空間都會被考慮在內。在垂直方向上，這些框可能會以不一樣形式來對齊：它們可能會把底部或頂部對齊，也可能把其內部的文本基線對齊。能把在一行上的框都徹底包含進去的一個矩形區域，被稱爲該行的行框。水平的margin、padding、border有效，垂直無效。不能指定寬高。
3. 行框的寬度是由包含塊和存在的浮動來決定。行框的高度由行高計算這一章所描述的規則來決定。

詳細可查看：inline-formatting: http://www.w3.org/TR/CSS2/visuren.html#inline-formatting

3、哪些狀況會脫離普通流

有三種狀況將使得元素脫離文檔流而存在，分別是浮動，絕對定位， 固定定位,隱藏元素。

浮動

　　浮動元素不佔任何正常文檔流空間， 而浮動元素的定位照樣基於正常的文檔流父級元素 ，而後從文檔流中抽出並儘可以遠的挪動至左側或許右側。當一個元素脫離正常文檔流後，依然在文檔流中的其餘元素將忽略該元素並填補其原先的空間。

但浮動元素，與行內元素相遇， 行內元素 並不會佔用浮動元素的空間. 用浮動實現佈局，父級元素 塌縮就是由於浮動元素不在正常流中。

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
  隱藏對應的元素，可是在文檔佈局中仍保留原來的空間。不脫離文檔流.

4、總結

文檔流是css佈局的基礎，以上簡單介紹了的文檔流的概念，根據文檔流元素的的分類，什麼會脫離文檔流，和BFC等佈局特性，可能會有錯誤，歡迎指正。

5、參考

[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