什么是FC太示？

FC是Formatting Context的縮寫柠贤，中文名：格式化上下文。是 W3C在CSS2.1 規(guī)范中的一個概念类缤。

FC是指頁面中一篇渲染區(qū)域臼勉，渲染區(qū)域內(nèi)使用的格式化上下文的渲染規(guī)則，決定了該區(qū)域以及其子元素如何定位餐弱。當然宴霸，使用同的渲染規(guī)則，也會對其他元素的起到相互關(guān)系的作用岸裙。

主要有哪些FC猖败？

主要的格式化上下文渲染規(guī)則一共有4種，分別是BFC（塊級格式化上下文）降允、IFC（行內(nèi)格式化上下文）恩闻、GFC（網(wǎng)格布局格式化上下文）、FFC（自適應(yīng)格式化上下文）剧董。
4種格式化上下文渲染規(guī)則幢尚，也是體現(xiàn)了CSS中不同的渲染規(guī)則。

BFC

什么是BFC

Block Formatting Context翅楼，塊級格式化上下文尉剩，一個獨立的塊級渲染區(qū)域，該區(qū)域擁有一套渲染規(guī)則來約束塊級盒子的布局毅臊，且與區(qū)域外部無關(guān)理茎。

BFC的約束規(guī)則

內(nèi)部的BOX會在垂直方向上一個接一個的放置；
垂直方向上的距離由margin決定管嬉。（完整的說法是：屬于同一個BFC的倆個相鄰的BOX的margin會發(fā)生重疊皂林，與方向無關(guān)。）
每個元素的左外邊距與包含塊的左邊界相接觸（從左到右）蚯撩，即使浮動元素也是如此础倍。（這說明BFC中的子元素不會超出它的包含塊，而position為absolute的元素可以超出它的包含塊邊界）胎挎；
BFC的區(qū)域不會與float的元素區(qū)域重疊沟启；
計算BFC的高度時忆家，浮動子元素也參與計算；
BFC就是頁面上的一個隔離的獨立容器德迹，容器里面的子元素不會影響到外面的元素芽卿，反之亦然；

BFC的應(yīng)用

防止margin發(fā)生重疊
防止發(fā)生因浮動導致的高度塌陷

怎么生成BFC

float的值不為none浦辨；
overflow的值不為visible蹬竖；
display的值為inline-block沼沈、table-cell流酬、table-caption；
position的值為absolute或fixed列另；
display：table也認為可以生成BFC芽腾？其實是在于Table會默認生成一個匿名的table-cell，正是這個匿名的table-cell生成了BFC页衙。

IFC

什么是IFC

IFC(Inline Formatting Contexts)直譯為"行內(nèi)格式化上下文"摊滔，IFC的line box（線框）高度由其包含行內(nèi)元素中最高的實際高度計算而來（不受到豎直方向的padding/margin影響)

IFC有的特性

IFC中的line box一般左右都貼緊整個IFC，但是會因為float元素而擾亂店乐。float元素會位于IFC與與line box之間艰躺，使得line box寬度縮短。

IFC中時不可能有塊級元素的眨八，當插入塊級元素時（如p中插入div）會產(chǎn)生兩個匿名塊與div分隔開腺兴，即產(chǎn)生兩個IFC，每個IFC對外表現(xiàn)為塊級元素廉侧，與div垂直排列页响。

IFC的應(yīng)用

水平居中：當一個塊要在環(huán)境中水平居中時，設(shè)置其為inline-block則會在外層產(chǎn)生IFC段誊，通過text-align則可以使其水平居中闰蚕。

垂直居中：創(chuàng)建一個IFC，用其中一個元素撐開父元素的高度连舍，然后設(shè)置其vertical-align:middle没陡，其他行內(nèi)元素則可以在此父元素下垂直居中。

GFC

什么是GFC

GFC(GridLayout Formatting Contexts)直譯為"網(wǎng)格布局格式化上下文"索赏，當為一個元素設(shè)置display值為grid的時候盼玄，此元素將會獲得一個獨立的渲染區(qū)域，我們可以通過在網(wǎng)格容器（grid container）上定義網(wǎng)格定義行（grid definition rows）和網(wǎng)格定義列（grid definition columns）屬性各在網(wǎng)格項目（grid item）上定義網(wǎng)格行（grid row）和網(wǎng)格列（grid columns）為每一個網(wǎng)格項目（grid item）定義位置和空間参滴。

GFC有的特性

GFC將改變傳統(tǒng)的布局模式强岸，他將讓布局從一維布局變成了二維布局。簡單的說砾赔，有了GFC之后蝌箍，布局不再局限于單個維度了青灼。這個時候你要實現(xiàn)類似九宮格，拼圖之類的布局效果顯得格外的容易妓盲。

FFC

什么是FFC

FFC(Flex Formatting Contexts)直譯為"自適應(yīng)格式化上下文"杂拨，display值為flex或者inline-flex的元素將會生成自適應(yīng)容器（flex container）。

FFC有的特性

Flex Box 由伸縮容器和伸縮項目組成悯衬。通過設(shè)置元素的 display 屬性為 flex 或 inline-flex 可以得到一個伸縮容器弹沽。設(shè)置為 flex 的容器被渲染為一個塊級元素，而設(shè)置為 inline-flex 的容器則渲染為一個行內(nèi)元素筋粗。

伸縮容器中的每一個子元素都是一個伸縮項目策橘。伸縮項目可以是任意數(shù)量的。伸縮容器外和伸縮項目內(nèi)的一切元素都不受影響娜亿。簡單地說丽已，F(xiàn)lexbox 定義了伸縮容器內(nèi)伸縮項目該如何布局。

FFC與BFC的區(qū)別

FFC與BFC有點兒類似买决，但仍有以下幾點區(qū)別：

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

vertical-align 對 Flexbox 中的子元素 是沒有效果的

float 和 clear 屬性對 Flexbox 中的子元素是沒有效果的沛婴，也不會使子元素脫離文檔流(但是對Flexbox 是有效果的！)

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

Flexbox 下的子元素不會繼承父級容器的寬