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ò)誤的６诙！偶芍！
一般情況下充择，如下圖所示，本應(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í)容器的寬
