CSS魔法堂：你一定误解过的Normal flow
前言
?剛接觸CSS時經常聽到看到一個詞"文檔流"，那到底什么是"文檔流"呢？然后會看到"絕對定位和浮動定位能脫離文檔流"，從這句可以看到文檔流和絕對定位、浮動定位是同一個范疇的概念，再后來在W3C標準文檔找到關于Absolute positioning和Float的內容，卻怎么也找不到Document flow(文檔流)的資料。后來終于知道是某位大神將Normal 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已經有很多資料圍繞它們來展開，而且我們也投入很多精力去理解它倆，但往往會忽略一個前提，那就是沒有Normal flow就沒有IFC、BFC。當我們采用絕對定位或浮動定位時，就沒有必要再討論IFC和BFC了。那么說絕對定位和浮動定位會讓元素產生新的BFC又是怎么說呢？
我是這樣理解的。首先絕對定位和浮動定位必須產生新的BFC，就想根元素會產生默認的BFC那樣，供采用常規流的塊級子孫盒子使用。但像Collapsing margins這種由BFC引起的行為特征，由于盒子本身不再受原來BFC的影響，自然就不會出現Collapsing margins了。
其實我有個疑問：那就是為什么一個文檔可以有多個BFC，卻只有一個IFC呢？
BFC下盒子定位的奧義
我想大家都試過采用這種方式實現水平居中(IE5.5下無效)
<style type="text/css">.center{font-size: 30px;line-height: 2;text-align: center;background: #06f;width: 200px;margin: 0 auto;} </style> <body><div class="center">hello world:)</div> </body>
參與BFC的盒子獨占一行，我想大家應該沒有異議了，但具體是如何獨占法呢？看等式吧!
其中margin-left/width/margin-right可為auto，且具有以下規則：
Normal flow的小弟——Relative positioning
?我們可以以Normal flow或Float定位模式作為基礎之上再疊加一個相對定位，從而實現更靈活的定位操作。
相對定位的最強武器就是top/right/bottom/left4個屬性了，好明顯它們默認值均是auto。另外所謂基于Normal flow或Float定位模式的相對定位，自然就是以Normal flow或Float定位模式下margin box的4條邊作為參考系了。
接下來只要掌握以下規則，就可以運用自如了：
(top/bottom規則同上)
注意：
若相對定位后的盒子超出所屬containing block的范圍，且overflow:auto|scroll;則會導致出現滾動條的情況，從而影響其他盒子的排版。
<div style="width:100px; height:100px; overflow:auto; border:2px solid blue;"> <div style="width:20px; height:20px; background-color:red; position:relative; top:100px; left:100px;">A</div> </div>總結
若有紕漏，請各位指正
尊重原創，轉載請注明來自：http://www.cnblogs.com/fsjohnhuang/p/5364580.html^_^肥子John
感謝
Relative positioning
Visual formatting model details
KB010: 常規流( Normal flow )
KB009: CSS 定位體系概述
http://www.css88.com/book/css/properties/layout/display.htm
如果您覺得本文的內容有趣就掃一下吧！捐贈互勉！
關注 - 85
粉絲 - 707 +加關注 1 0 ? 上一篇：CSS魔法堂：Absolute Positioning就這個樣
? 下一篇：CSS魔法堂：說說Float那個被埋沒的志向
posted @ 2016-04-08 06:37 ^_^肥仔John 閱讀(1075) 評論(0) 編輯 收藏 刷新評論刷新頁面返回頂部 注冊用戶登錄后才能發表評論，請 登錄 或 注冊，訪問網站首頁。 【推薦】超50萬VC++源碼: 大型工控、組態\仿真、建模CAD源碼2018！
【推薦】加入騰訊云自媒體扶持計劃，免費領取域名&服務器
最新IT新聞:
· 蘇寧宣布重磅福利：“7天無理由退貨”線上線下統一標準
· 興趣降溫 安卓廠商無意模仿iPhone X推出3D識別
· 樂視云更名新樂視云聯：仍未獲云服務牌照
· 微軟搜索引擎Bing改進航班 電影和比賽結果查詢
· 彭博商業周刊：硅谷悄然掀起中國技術人員回國潮
? 更多新聞... 最新知識庫文章:
· 步入云計算
· 以操作系統的角度述說線程與進程
· 軟件測試轉型之路
· 門內門外看招聘
· 大道至簡，職場上做人做事做管理
? 更多知識庫文章...
公告
肥仔John@github作品：
iScheme—Scheme解釋器
preview.js—純前端的圖片預覽組件 本文轉自^_^肥仔John博客園博客，原文鏈接：http://www.cnblogs.com/fsjohnhuang/p/5364580.html，如需轉載請自行聯系原作者
總結
以上是生活随笔為你收集整理的CSS魔法堂：你一定误解过的Normal flow的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java Web之BaseServlet
- 下一篇： [24]CSS3 弹性伸缩布局(上)