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

標籤：

目錄

• 一、概述
• 二、區塊層級元素和內嵌元素
  • 常見的區塊層級元素
  • 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布局規則

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

詳細可查看：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

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