剛接觸css時經常聽到看到乙個詞"文件流"，那到底什麼是"文件流"呢？然後會看到"絕對定位和浮動定位能脫離文件流"，從這句可以看到文件流和絕對定位、浮動定位是同乙個範疇的概念，再後來在w3c標準文件找到關於absolute positioning和float的內容，卻怎麼也找不到document flow(文件流)的資料。後來終於知道是某位大神將normal flow翻譯為文件流而已。。。。。。而我更偏好它的直譯"常規流"，或直接引用英文名詞就好了。
首先我們從名稱入手，normal flow直譯為"常規流"，我們可以猜想它有以下幾個特點：
作為預設的定位模式;
其他定位模式均以其為基礎。
各位都知道與定位系統的css屬性position:static|relative|absolute|fixed和float:none|left|right，其中position的預設值是static，而float的預設值為none。而position:static|relative均屬於normal flow。
另外單純設定position:absolute效果與採用normal flow是一樣的（《css魔法堂：absolute positioning就這個樣》），而浮動定位也是基於normal flow。所以我認為"脫離常規流"這一說法不完全正確，甚至讓人產生誤解
對normal flow的地位與和其餘定位模式的關係有初步認知後，必須是迫不及待地想深入它的特性和行為特徵了！這就回到那個耳熟能詳的的ifc和bfc了。具體請參考css魔法堂：重新認識box model、ifc、bfc和collapsing margins
對於ifc和bfc已經有很多資料圍繞它們來展開，而且我們也投入很多精力去理解它倆，但往往會忽略乙個前提，那就是沒有normal flow就沒有ifc、bfc。當我們採用絕對定位或浮動定位時，就沒有必要再討論ifc和bfc了。那麼說絕對定位和浮動定位會讓元素產生新的bfc又是怎麼說呢？
我是這樣理解的。首先絕對定位和浮動定位必須產生新的bfc，就想根元素會產生預設的bfc那樣，供採用常規流的塊級子孫盒子使用。但像collapsing margins這種由bfc引起的行為特徵，由於盒子本身不再受原來bfc的影響，自然就不會出現collapsing margins了。
其實我有個疑問：那就是為什麼乙個文件可以有多個bfc，卻只有乙個ifc呢？
我想大家都試過採用這種方式實現水平居中(ie5.5下無效)
type="text/css">
.center
style>
class="center">hello world:)div>
body>
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block若width為auto，則其他設定為auto的屬性的實際值為0，並讓width的實際值滿足等式；
若width為數值，而margin-left/right均為auto，且除marin-left/right外其他屬性值總和小於containing block的寬度，那麼margin-left == margin-right == ('border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width')/2；否則margin-left == margin-right == 0.
我們可以以normal flow或float定位模式作為基礎之上再疊加乙個相對定位，從而實現更靈活的定位操作。
相對定位的最強**就是top/right/bottom/left4個屬性了，好明顯它們預設值均是auto。另外所謂基於normal flow或float定位模式的相對定位，自然就是以normal flow或float定位模式下margin box的4條邊作為參考係了。
接下來只要掌握以下規則，就可以運用自如了：
left/right均為auto，則實際值為0;
left/right其中乙個為數值，則兩者等式left == -right;
left/right均為數值，則根據direction值。若direction為ltr，則left值保留，而right = -left；若direction為rtl，則right值保留，而left = -right。
(top/bottom規則同上)
注意：
疊加相對定位後的盒子不會影響其他盒子的排版，只是會發生重疊的效果而已;
若相對定位後的盒子超出所屬containing block的範圍，且overflow:auto|scroll;則會導致出現滾動條的情況，從而影響其他盒子的排版。
style="width:100px; height:100px; overflow:auto; border:2px solid blue;">
style="width:20px; height:20px; background-color:red; position:relative; top:100px; left:100px;">adiv>
div>
visual formatting model details
kb010: 常規流( normal flow )
kb009: css 定位體系概述
如果您覺得本文的內容有趣就掃一下吧！捐贈互勉！
分類:
css好文要頂
關注我收藏該文
^_^肥仔john
關注 - 85
粉絲 - 707
+加關注 10
css魔法堂：absolute positioning就這個樣
css魔法堂：說說float那個被埋沒的志向
posted @
2016-04-08 06:37
^_^肥仔john 閱讀(
0) 編輯收藏
重新整理頁面
返回頂部
登入 或
註冊，訪問**首頁。
【推薦】超50萬vc++原始碼: 大型工控、組態\**、建模cad原始碼2018！
最新it新聞:
· 蘇寧宣布重磅福利：「7天無理由退貨」線上線下統一標準
· 興趣降溫 安卓廠商無意模仿iphone x推出3d識別
· 樂視雲更名新樂視雲聯：仍未獲雲服務牌照
· 微軟搜尋引擎bing改進航班 電影和比賽結果查詢
· 彭博商業週刊：矽谷悄然掀起中國技術人員回國潮
» 更多新聞...
最新知識庫文章:
· 步入雲計算
· 以作業系統的角度述說執行緒與程序
· 軟體測試轉型之路
· 門內門外看招聘
· 大道至簡，職場上做人做事做管理
» 肥仔john@github
CSS魔法堂 你一定誤解過的Normal flow
剛接觸css時經常聽到看到乙個詞 文件流 那到底什麼是 文件流 呢？然後會看到 絕對定位和浮動定位能脫離文件流 從這句可以看到文件流和絕對定位 浮動定位是同乙個範疇的概念，再後來在w3c標準文件找到關於absolute positioning和float的內容，卻怎麼也找不到document flo...
CSS魔法堂 你一定誤解過的Normal flow
剛接觸css時經常聽到看到乙個詞 文件流 那到底什麼是 文件流 呢？然後會看到 絕對定位和浮動定位能脫離文件流 從這句可以看到文件流和絕對定位 浮動定位是同乙個範疇的概念，再後來在w3c標準文件找到關於absolute positioning和float的內容，卻怎麼也找不到document flo...
你以為的不是一定就是你以為的
我總樂觀的以為，只要a，就會b。反過來講，這件敘述的事，如果我認為它可以完成，但是我無法證明它可以完成，難道就完成不了了嗎？如果a存在，我們就應該找到證據，當我們找不到證據的時候，就都會認為a不存在。這個爭論在無神論，還有很多超自然神話中都有這樣的爭論。我在上家公司，產品總監要求在某個過程中，加個 ...