關(guān)于各種Formatting context

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ì)定位元素,positionabsolute/fixed
  • display為以下其中之一的值inline-blocks氛改,table帐萎,table-celltable-caption胜卤。
  • 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ò)誤的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ò)誤)

  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)過測試之后發(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

使用 *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í)容器的寬
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末此疹,一起剝皮案震驚了整個(gè)濱河市僧诚,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌蝗碎,老刑警劉巖湖笨,帶你破解...
    沈念sama閱讀 222,729評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異蹦骑,居然都是意外死亡慈省,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門眠菇,熙熙樓的掌柜王于貴愁眉苦臉地迎上來边败,“玉大人,你說我怎么就攤上這事琼锋》殴耄” “怎么了?”我有些...
    開封第一講書人閱讀 169,461評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵缕坎,是天一觀的道長。 經(jīng)常有香客問我篡悟,道長谜叹,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,135評(píng)論 1 300
  • 正文 為了忘掉前任搬葬,我火速辦了婚禮荷腊,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘急凰。我一直安慰自己女仰,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,130評(píng)論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著疾忍,像睡著了一般乔外。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上一罩,一...
    開封第一講書人閱讀 52,736評(píng)論 1 312
  • 那天杨幼,我揣著相機(jī)與錄音,去河邊找鬼聂渊。 笑死差购,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的汉嗽。 我是一名探鬼主播欲逃,決...
    沈念sama閱讀 41,179評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢(mèng)啊……” “哼饼暑!你這毒婦竟也來了暖夭?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,124評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤撵孤,失蹤者是張志新(化名)和其女友劉穎迈着,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體邪码,經(jīng)...
    沈念sama閱讀 46,657評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡裕菠,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,723評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了闭专。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片奴潘。...
    茶點(diǎn)故事閱讀 40,872評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖影钉,靈堂內(nèi)的尸體忽然破棺而出画髓,到底是詐尸還是另有隱情,我是刑警寧澤平委,帶...
    沈念sama閱讀 36,533評(píng)論 5 351
  • 正文 年R本政府宣布奈虾,位于F島的核電站,受9級(jí)特大地震影響廉赔,放射性物質(zhì)發(fā)生泄漏肉微。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,213評(píng)論 3 336
  • 文/蒙蒙 一蜡塌、第九天 我趴在偏房一處隱蔽的房頂上張望碉纳。 院中可真熱鬧,春花似錦馏艾、人聲如沸劳曹。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽铁孵。三九已至锭硼,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間库菲,已是汗流浹背账忘。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評(píng)論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留熙宇,地道東北人鳖擒。 一個(gè)月前我還...
    沈念sama閱讀 49,304評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像烫止,于是被迫代替她去往敵國和親蒋荚。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,876評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容