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

創(chuàng)新互聯(lián)公司成立于2013年，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元東興做網(wǎng)站,已為上家服務(wù),為東興各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18982081108

ormatting context

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

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

Formatting context的種類

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

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

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

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

BFC

接觸的緣由？

相信很多人了解到BFC這個(gè)概念，都是因?yàn)樵谒伎紴槭裁催@樣做可以“清除浮動(dòng)”而搜索到了和BFC有關(guān)的結(jié)果。那么我們先來拓展一下：

Q：浮動(dòng)的時(shí)候，文字是不會(huì)重疊的，為什么?
來源于網(wǎng)絡(luò)的答案：

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

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

• 當(dāng)應(yīng)用于不浮動(dòng)的塊時(shí)，它將這個(gè)塊的邊框邊界移動(dòng)到所有相關(guān)浮動(dòng)元素外邊界的下方。這個(gè)行為作用時(shí)會(huì)導(dǎo)致margin collapsing不起作用。

• 當(dāng)應(yīng)用于浮動(dòng)元素時(shí)，它將元素的外邊界移動(dòng)到所有相關(guān)的浮動(dòng)元素外邊界的下方。這會(huì)影響后面的浮動(dòng)元素的位置無法高于它之前的元素。

另外一種最常用的就是使用overflow:hidden來進(jìn)行清除浮動(dòng)，而它的原理就和BFC有關(guān)。

觸發(fā)BFC的條件

• 浮動(dòng)元素，float 除 none 以外的值

• 絕對(duì)定位元素，position為absolute/fixed。

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

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

• fieldset元素

BFC的特性

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

下面是搜索了一些來源于網(wǎng)絡(luò)的特性：

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

    

   

   margin collopse

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

    

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

一個(gè)BFC的邊框不能和它里面的元素的外邊距重疊，所以如果給一個(gè)挨著浮動(dòng)的塊級(jí)格式化上下文添加負(fù)的外邊距時(shí)"不起作用"??。

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

 

margin collapse

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

1. 盒子高度包含了浮動(dòng)元素：

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

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

拓展：hasLayout

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

FFC

觸發(fā)FFC的條件

• display: flex;

• display: inline-flex;

與BFC的不同

以下來源于網(wǎng)絡(luò)：

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

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

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

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

• Flexbox 下的子元素不會(huì)繼承父級(jí)容器的寬

以上就是如何理解W3C CSS2.1規(guī)范中的Formatting context，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章題目：如何理解W3CCSS2.1規(guī)范中的Formattingcontext
URL鏈接：http://jinyejixie.com/article0/pdccio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、建站公司、App設(shè)計(jì)、網(wǎng)站營(yíng)銷、電子商務(wù)、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)