如何理解W3C CSS2.1規(guī)范中的Formatting context

本篇文章給大家分享的是有關如何理解W3C CSS2.1規(guī)范中的Formatting context，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

ormatting context

我們把網頁看作是由很多個盒子組成的，而這些盒子的展示方式，就是由display這個屬性來決定的。
這里出現(xiàn)了一個概念，叫做Formatting context（格式上下文）：

Formatting context 是 W3C CSS2.1 規(guī)范中的一個概念。它是頁面中的一塊渲染區(qū)域，有一套渲染規(guī)則決定了其子元素將如何定位，以及和其他元素的關系和相互作用。

Formatting context的種類

• Block fomatting context (BFC）：塊級格式化上下文

• Inline formatting context (IFC）：行內格式化上下文

• Flex formatting context（FFC）：CSS3中的flex布局

• Grid formatting context（GFC）：CSS3中的Grid布局

BFC

接觸的緣由？

相信很多人了解到BFC這個概念，都是因為在思考為什么這樣做可以“清除浮動”而搜索到了和BFC有關的結果。那么我們先來拓展一下：

Q：浮動的時候，文字是不會重疊的，為什么?
來源于網絡的答案：

使用float脫離文檔流時，其他盒子會無視這個元素，但其他盒子內的文本依然會為這個元素讓出位置，環(huán)繞在周圍。

Q：為什么用clear屬性可以清除浮動？
首先有一個前提，clear屬性只能賦給塊級元素才可能會有效果。三門峽婦科醫(yī)院http://www.smxrlyy.com/
然后來自MDN：

• 當應用于不浮動的塊時，它將這個塊的邊框邊界移動到所有相關浮動元素外邊界的下方。這個行為作用時會導致margin collapsing不起作用。

• 當應用于浮動元素時，它將元素的外邊界移動到所有相關的浮動元素外邊界的下方。這會影響后面的浮動元素的位置無法高于它之前的元素。

另外一種最常用的就是使用overflow:hidden來進行清除浮動，而它的原理就和BFC有關。

觸發(fā)BFC的條件

• 浮動元素，float 除 none 以外的值

• 絕對定位元素，position為absolute/fixed。

• display為以下其中之一的值inline-blocks、table-cell、flex、table-caption或者inline-flex。

• overflow除了visible以外的值（hidden，auto，scroll）。

• fieldset元素

BFC的特性

如果形成了BFC，就形成了一個單獨的塊。塊和塊之間不會出現(xiàn)干擾，所以浮動的元素塊不會重疊。

下面是搜索了一些來源于網絡的特性：

1. 如果這兩個相鄰的塊框不屬于同一個BFC，它們的外邊距就不會疊加。（margin collopse）證實出來的結果是錯誤的?。?！
   一般情況下，如下圖所示，本應該是相隔40px，但是會發(fā)生重疊，結果出現(xiàn)的是盒子1的marginTop和盒子2的marginBottom里那個更大的距離：

    

   

   margin collopse

   
   如果我們給box1加上overflow:hidden，還是給box2加上overflow:hidden還是都加上，都無法解決這個問題。（不知是否是本人理解錯誤，目前我定它為錯誤）

    

2. BFC邊框和內部貼緊子元素不發(fā)生重疊：

一個BFC的邊框不能和它里面的元素的外邊距重疊，所以如果給一個挨著浮動的塊級格式化上下文添加負的外邊距時"不起作用"??。

除了上面相鄰會出現(xiàn)重疊外，這種父子的情況也會出現(xiàn)重疊。如果不給下面這個父親盒子加上overflow，里面的孩子就永遠是緊貼著父親的邊框的，并且parent會取孩子和它自己marginTop里面最大的那個值來和test隔開。

margin collapse

另外這里引用寫的是“margin負值不起作用”，經過測試之后發(fā)現(xiàn)也是錯的。

1. 盒子高度包含了浮動元素：

創(chuàng)建了BFC的元素就是一個獨立的盒子，里面的子元素不會在布局上影響外面的元素，反之亦然，同時BFC依舊屬于文檔中的普通流。
就是BFC內的浮動元素可以撐起這個盒子。

1. BFC的區(qū)域不會與float box重疊：
   也就是如果兩個盒子黏在一起，一個是BFC一個是float（話說，float不也是BFC么=_=）這個時候它們不會重疊。

拓展：hasLayout

使用 *zoom: 1 的屬性，這是一個IEhack， 因為 IE6-7 并不支持 W3C 的 BFC ，而是使用私有屬性 hasLayout 。
從表現(xiàn)上說，hasLayout 跟 BFC 很相似。 hasLayout 自身存在很多問題，導致了IE6-7 中一系列的 bug。

FFC

觸發(fā)FFC的條件

• display: flex;

• display: inline-flex;

與BFC的不同

以下來源于網絡：

• Flexbox 不支持 ::first-line 和 ::first-letter 這兩種偽元素

• vertical-align 對 Flexbox 中的子元素 是沒有效果的

• float 和 clear 屬性對 Flexbox 中的子元素是沒有效果的，也不會使子元素脫離文檔流(但是對Flexbox本身是有效果的！)

• 多欄布局（column-*） 在 Flexbox 中也是失效的，就是說我們不能使用多欄布局在Flexbox 排列其下的子元素

• Flexbox 下的子元素不會繼承父級容器的寬

以上就是如何理解W3C CSS2.1規(guī)范中的Formatting context，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業(yè)資訊頻道。