Formatting 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ì)有效果铺韧。
然后來自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
帐萎,table-cell
,table-caption
胜卤。 overflow
除了visible
以外的值(hidden疆导,auto,scroll)葛躏。-
fieldset
元素
BFC的特性
如果形成了BFC是鬼,就形成了一個(gè)單獨(dú)的塊。塊和塊之間不會(huì)出現(xiàn)干擾紫新,所以浮動(dòng)的元素塊不會(huì)重疊均蜜。
下面是搜索了一些來源于網(wǎng)絡(luò)的特性:
-
如果這兩個(gè)相鄰的塊框不屬于同一個(gè)BFC,它們的外邊距就不會(huì)疊加芒率。(margin collopse)證實(shí)出來的結(jié)果是錯(cuò)誤的6诙!偶芍!
一般情況下充择,如下圖所示,本應(yīng)該是相隔40px匪蟀,但是會(huì)發(fā)生重疊椎麦,結(jié)果出現(xiàn)的是盒子1的marginTop和盒子2的marginBottom里那個(gè)更大的距離:
margin collopse
如果我們給box1加上overflow:hidden,還是給box2加上overflow:hidden還是都加上材彪,都無法解決這個(gè)問題观挎。(不知是否是本人理解錯(cuò)誤,目前我定它為錯(cuò)誤) 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負(fù)值不起作用”缓升,經(jīng)過測試之后發(fā)現(xiàn)也是錯(cuò)的。
- 盒子高度包含了浮動(dòng)元素:
創(chuàng)建了BFC的元素就是一個(gè)獨(dú)立的盒子蕴轨,里面的子元素不會(huì)在布局上影響外面的元素港谊,反之亦然,同時(shí)BFC依舊屬于文檔中的普通流尺棋。
就是BFC內(nèi)的浮動(dòng)元素可以撐起這個(gè)盒子封锉。
- BFC的區(qū)域不會(huì)與float box重疊:
也就是如果兩個(gè)盒子黏在一起绵跷,一個(gè)是BFC一個(gè)是float(話說,float不也是BFC么=_=)這個(gè)時(shí)候它們不會(huì)重疊成福。
拓展:hasLayout
使用 *zomm: 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í)容器的寬