????????在前面兩篇文章分別介紹了BFC、IFC，這兩個(gè)都是CSS2里的規(guī)范和概念，這篇文章接續(xù)上兩篇文章來(lái)說(shuō)說(shuō)CSS3規(guī)范里的GFC、FFC，至此這一序列的總結(jié)文章也就結(jié)束了。
1，CSS3
????????介紹GFC，F(xiàn)FC，就繞不開(kāi)CSS3，說(shuō)起CSS3，我們就得從頭來(lái)回顧下CSS的發(fā)展歷史和CSS3的誕生。
誕生
????????1990年，Web先驅(qū)Time Berners--Lee和Robert Calliau一起發(fā)明了Web，并在1994年Web真正走出了實(shí)驗(yàn)室，從Web(HTML)被發(fā)明開(kāi)始，網(wǎng)頁(yè)樣式一直以各種形式存在， 但是網(wǎng)頁(yè)的樣式此時(shí)掌握在瀏覽器開(kāi)發(fā)商手里，能控制的顯示也很少，為了滿足網(wǎng)頁(yè)設(shè)計(jì)者的不斷提升的要求，網(wǎng)頁(yè)增加了越來(lái)越多的顯示功能，變得越來(lái)越復(fù)雜，頁(yè)面越來(lái)越臃腫，于是CSS誕生了，其實(shí)當(dāng)時(shí)業(yè)界也提出了一些統(tǒng)一樣式語(yǔ)言的建議，但是CSS是第一個(gè)具有“層疊”意義（繼承、覆蓋、設(shè)計(jì)靈活）的樣式表語(yǔ)言，這門語(yǔ)言是在1994年由哈坤·利提出來(lái)的建議，并在伯特·波斯當(dāng)時(shí)在設(shè)計(jì)的Web瀏覽器Argo上得到了應(yīng)用，最終在1996年，W3C正式推出了CSS第一個(gè)規(guī)范，這就是CSS1。CSS1推出之前我們可以稱之為CSS0時(shí)代（非規(guī)范）。
css1
????CSS1提供有關(guān)字體、顏色、位置和文本屬性的的基本信息，該版本得到了目前可解析XML和HTML的瀏覽器的廣泛支持，應(yīng)用樣式到標(biāo)記系統(tǒng)的方式（可用樣式屬性和聲明方式）主要有：
選擇器：要使用CSS對(duì)HTML頁(yè)面中的元素實(shí)現(xiàn)一對(duì)一、一對(duì)多、多對(duì)一的樣式控制，就必須使用到選擇器，選擇器大致可分為Id選擇器、類選擇器、上下文選擇器（通過(guò)元素位置的上下文關(guān)系來(lái)定義樣式，應(yīng)用或者避免某項(xiàng)規(guī)則，CSS2中被成為派生選擇器 ），用來(lái)定義希望應(yīng)用樣式的HMTL元素或標(biāo)簽。
屬性：屬性包含屬性名和值，中間已冒號(hào)隔開(kāi)，屬性通常包含在規(guī)則塊里（｛｝包裹），按照作用屬性大致可分為字體、顏色、位置、大小、邊距、邊框等，主要是定義網(wǎng)頁(yè)以及網(wǎng)頁(yè)元素的展示。
偽類與偽元素：偽類和偽元素都是用于向某些選擇器設(shè)置的特殊效果，以冒號(hào)區(qū)隔比如a:acvtive{}
css2
CSS2是對(duì)CSS1的補(bǔ)充，屬于包含關(guān)系，CSS2拓展了選擇器，充實(shí)了樣式單的功能，推薦的是內(nèi)容和表現(xiàn)分離的方式來(lái)應(yīng)用樣式，
css3
css3是目前最新的一版，相對(duì)于css2選擇器更加豐富、樣式屬性也更加豐富，增加增強(qiáng)了一些顯示效果（如）動(dòng)畫(huà)，以前一些需要在js或者用圖片實(shí)現(xiàn)的效果，現(xiàn)在可以考慮用Css來(lái)實(shí)現(xiàn)了。還有一個(gè)比較重要的一點(diǎn)，之前CSS中一些存在兼容的問(wèn)題，在CSS3中得到了標(biāo)準(zhǔn)的支持。
2，F(xiàn)FC(Flexible Formatting Context)
????????CSS3引入了一種新的布局模型——flex布局(之前有文章介紹過(guò))。flex是flexible box的縮寫(xiě)，一般稱之為彈性盒模型。和CSS3其他屬性不一樣，flexbox并不是一個(gè)屬性，而是一個(gè)模塊，包括多個(gè)CSS3屬性。flex布局提供一種更加有效的方式來(lái)進(jìn)行容器內(nèi)的項(xiàng)目布局，以適應(yīng)各種類型的顯示設(shè)備和各種尺寸的屏幕，使用Flex box布局實(shí)際上就是聲明創(chuàng)建了FFC(自適應(yīng)格式上下文)，具體自定義格式上下文有什么特性，也可以參考我之前寫(xiě)的文章《盒模型和布局》。
????????在布局的時(shí)候，較早時(shí)經(jīng)常會(huì)使用浮動(dòng)，使用浮動(dòng)的元素會(huì)脫離文檔流，那文檔流到底是什么東西呢？ "流"是render tree（渲染樹(shù)）在布局時(shí)的一個(gè)概念。
css2.1 中有相關(guān)的定義：
從上我們知道渲染數(shù)布局時(shí)依據(jù)的位置規(guī)則（當(dāng)然還有大小，所占的空間），也就是說(shuō)我們所說(shuō)的流實(shí)際上規(guī)定了元素怎么排放以及相互作用（之前講的渲染規(guī)則）。在CSS中主要有三種流： normal flow（普通流，我們經(jīng)常將的脫離，脫離的就是它）、floats、Absolute Posioning（position不為static、relative）。FFC屬于normal flow里的一個(gè)上下文概念，是普通流的一種，而浮動(dòng)流和定位流以及CSS其他屬性對(duì)FFC是有影響的，主要表現(xiàn)在以下幾點(diǎn):
[1] float、clear和vertical-align屬性在伸縮項(xiàng)目上沒(méi)有效果
[2] 伸縮容器的margin與其內(nèi)容的margin不會(huì)重疊
[3] text-align屬性在伸縮容器上沒(méi)有效果，因?yàn)槠渲豢蓱?yīng)用于塊級(jí)block容器
[4] 另外，columns屬性伸縮容器上沒(méi)有效果
備注：
脫離文檔流，也就是將元素從普通的布局排版中拿走，其他盒子在定位的時(shí)候，會(huì)當(dāng)做脫離文檔流的元素不存在而進(jìn)行定位。需要注意的是，使用float脫離文檔流時(shí)，其他盒子會(huì)無(wú)視這個(gè)元素，但其他盒子內(nèi)的文本依然會(huì)為這個(gè)元素讓出位置，環(huán)繞在周圍。而對(duì)于使用absolute positioning脫離文檔流的元素，其他盒子與其他盒子內(nèi)的文本都會(huì)無(wú)視它。
3，GFC(GridLayout Formatting Context)
????????也是在《盒模型和布局》中我們用table來(lái)實(shí)現(xiàn)了一個(gè)傳統(tǒng)的三欄布局，這實(shí)際上是一種二維布局方式，CSS3中增加的GFC也是實(shí)現(xiàn)二維布局的方式，而且比table提供了更好的細(xì)節(jié)和控制。
????????GFC(GridLayout Formatting Contexts)直譯為"網(wǎng)格布局格式化上下文"，當(dāng)為一個(gè)元素設(shè)置display值為grid的時(shí)候，此元素將會(huì)獲得一個(gè)獨(dú)立的渲染區(qū)域，我們可以通過(guò)在網(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的應(yīng)用范式和flex有點(diǎn)像，以后我們專門介紹下此種布局方式（bootstrap css類庫(kù) 里面模擬實(shí)現(xiàn)了網(wǎng)格布局），這里我們不展開(kāi)敘述，我們只需知道和FFC一樣，GFC也定義了特殊的渲染規(guī)則，也屬于普通流的一種。
