css關於常規流和浮動的兩個疑問

該文 從一片文章整理而來，用於加深對常規流和浮動的理解。

 

一：FC和包含塊是什麼關係

描述：在css中，格式化上下文( Formatting context )和包含塊( Containing block )是種什麼關係？

 

我其實想說，沒什麼關係。若是硬要說有什麼關係的話，在FC中(不管是BFC仍是IFC)，元素受制於包含塊，元素的寬度、排布等都取決於包含塊。舉一個很是極端的例子，這個問題對我而言，等同於站在一個房間中，問「這個房間裏的傢俱的擺放和這個房間有什麼關係」？。兩個概念，沒什麼直接關係，可是顯然傢俱放在房間這樣一個環境裏，怎麼放天然也和房間有關。

 

就如同標準的相似描述：「在塊格式化上下文中，框從包含塊的頂部開始依次垂直放置...在行格式化上下文中，行框的寬度取決於包含塊以及浮動的存在...」——而這些都是在描述格式化上下文中，包含塊所起到的做用。

 

 

二：爲何BFC能夠包含浮動元素

描述：浮動元素已經脫離了常規流，但是爲何又說塊格式化上下文能夠包含浮動元素？

 

個人第一反應是，爲何BFC不能包含浮動元素，換言之，在我概念中彷佛這是理所固然的事。

先舉一個極端的例子來簡短說明什麼是常規流、浮動和定位：

• 如今一個班的學生要拍集體照，你們就按學號一個個走出來排成幾排面對照相機。這就是最普通的流程。而若是中間任意一個同窗要上廁所，那麼那個空缺天然會被後面的同窗填補上來。同窗們依照既定的順序(在代碼中就是元素的順序)依次排列。

• 而後攝影師以爲，某位同窗站的位置有點靠後，讓他上前一小步。這就是相對定位。

• 攝影師又以爲，某位同窗過矮了，要讓他直接靠邊到隊伍的最右邊。這就是浮動。

• 最後，攝影師看了看鏡頭對老師說，你要站在這個位置。這就是絕對定位。

拋開諸多細節，CSS無非也就是作了這些事，排版引擎就如同攝影師同樣依照每一個學生自身高矮胖瘦的描述（沒錯，CSS就是描述）將他們排列出來。因爲上下文(context)原本就是抽象詞，這個例子裏，照片在教室拍，那麼環境就是教室。若是一個年紀拍集體照，那麼環境就是操場，但又以每一個班級爲單位，班的概念就是新建的上下文環境，班中的隊伍排列方式，和整個年級的排列徹底無關。

回到剛纔的問題，首先「脫離了常規流」這種抽象語句不是指浮動和常規流毫無關係，浮動偏偏與常規流密切相關。

而後，對於「塊格式化上下文是描述常規流的」這樣的語句，也算是一種抽象的理解者的造句，可能這就是最有疑問的地方。可能由於在CSS2標準裏，塊格式化上下文和行格式化上下文都是在常規流的章節中描述的，與常規流息息相關。但上下文這個概念本來的含義就相似於環境、語境，極端一些的例子：在這個世界裏，會颳風，會下雨，會有地震，這些都是天然規律，描述了這個世界中規則(就像BFC和IFC描述了普通流的排布規則)，然而仍是有人在這個世界上，一邊迎合世界一邊奉行本身的規則。

咱們遵循標準所描述的規則，但標準本應該更爲簡單，卻由於嚴謹而人爲的抽象。其實想象一下，若是是本身在寫標準，會怎麼樣？若是你是做者，你定義了常規流，表述常規流中的元素存在於一個叫BFC的東西里，若是先前沒有定義過，那麼下一步，你必然是要定義什麼是BFC。因此BFC和IFC出如今常規流章節中並不奇怪，並且仍是真正的文檔的上下文的要求。