什么是css的BFC败砂、IFC、FFC and GFC
先說一下什么是FC
FC：Formatting Contexts魏铅，是W3C CSS2.1規(guī)范中的一個(gè)概念昌犹。它是頁面中的一塊渲染區(qū)域览芳，并且有一套渲染規(guī)則斜姥，它決定了其子元素將如何定位铸敏，以及和其他元素的關(guān)系和相互作用杈笔。
BFC:“塊級格式化上下文”
Block Formatting Contexts就是頁面上的一個(gè)隔離的渲染區(qū)域糕非，容器里面的子元素不會在布局上影響到外面的元素朽肥，反之也是如此。
如何生成BFC：
float的值不為none融师。
overflow的值不為visible旱爆。
position的值不為relative和static窘茁。
display的值為table-cell, table-caption, inline-block中的任何一個(gè)山林。
作用：
結(jié)合塊級別元素浮動(dòng)，里面的元素則是在一個(gè)相對隔離的環(huán)境里運(yùn)行桑孩。
IFC:“內(nèi)聯(lián)格式化上下文”
IFC的line box（線框）高度由其包含行內(nèi)元素中最高的實(shí)際高度計(jì)算而來（不受到豎直方向的padding/margin影響)
IFC是如何生成的：
IFC中的line box一般左右都貼緊整個(gè)IFC流椒，但是會因?yàn)閒loat元素而擾亂宣虾。float元素會位于IFC與與line box之間，使得line box寬度縮短蜻势。 同個(gè)ifc下的多個(gè)line box高度會不同握玛。 IFC中時(shí)不可能有塊級元素的次员，當(dāng)插入塊級元素時(shí)（如p中插入div）會產(chǎn)生兩個(gè)匿名塊與div分隔開淑蔚，即產(chǎn)生兩個(gè)IFC刹衫，每個(gè)IFC對外表現(xiàn)為塊級元素带迟，與div垂直排列。
作用：
水平居中：當(dāng)一個(gè)塊要在環(huán)境中水平居中時(shí)嗅绰，設(shè)置其為inline-block則會在外層產(chǎn)生IFC窘面，通過text-align則可以使其水平居中叽躯。
垂直居中：創(chuàng)建一個(gè)IFC点骑，用其中一個(gè)元素?fù)伍_父元素的高度，然后設(shè)置其vertical-align:middle紧索，其他行內(nèi)元素則可以在此父元素下垂直居中馋嗜。
GFC：“網(wǎng)格布局格式化上下文”
當(dāng)為一個(gè)元素設(shè)置display值為grid的時(shí)候葛菇，此元素將會獲得一個(gè)獨(dú)立的渲染區(qū)域眯停，我們可以通過在網(wǎng)格容器（grid container）上定義網(wǎng)格定義行（grid definition rows）和網(wǎng)格定義列（grid definition columns）屬性各在網(wǎng)格項(xiàng)目（grid item）上定義網(wǎng)格行（grid row）和網(wǎng)格列（grid columns）為每一個(gè)網(wǎng)格項(xiàng)目（grid item）定義位置和空間莺债。?
那么GFC有什么用呢齐邦，和table又有什么區(qū)別呢第租？
首先同樣是一個(gè)二維的表格，但GridLayout會有更加豐富的屬性來控制行列慎宾，控制對齊以及更為精細(xì)的渲染語義和控制趟据。
FFC：“自適應(yīng)格式化上下文”
display值為flex或者inline-flex的元素將會生成自適應(yīng)容器（flex container）汹碱。
FFC 是如何生成的：
Flex Box 由伸縮容器和伸縮項(xiàng)目組成咳促。通過設(shè)置元素的 display 屬性為 flex 或 inline-flex 可以得到一個(gè)伸縮容器。設(shè)置為 flex 的容器被渲染為一個(gè)塊級元素枷莉，而設(shè)置為 inline-flex 的容器則渲染為一個(gè)行內(nèi)元素笤妙。
作用
伸縮容器中的每一個(gè)子元素都是一個(gè)伸縮項(xiàng)目蹲盘。伸縮項(xiàng)目可以是任意數(shù)量的召衔。伸縮容器外和伸縮項(xiàng)目內(nèi)的一切元素都不受影響。簡單地說趣席，F(xiàn)lexbox 定義了伸縮容器內(nèi)伸縮項(xiàng)目該如何布局宣肚。
如果文章對你有用霉涨，就點(diǎn)個(gè)贊吧惭适！
