????????在前面兩篇文章分別介紹了BFC、IFC秉沼，這兩個都是CSS2里的規(guī)范和概念桶雀，這篇文章接續(xù)上兩篇文章來說說CSS3規(guī)范里的GFC、FFC唬复，至此這一序列的總結(jié)文章也就結(jié)束了矗积。
1，CSS3
????????介紹GFC敞咧，F(xiàn)FC棘捣，就繞不開CSS3，說起CSS3妄均，我們就得從頭來回顧下CSS的發(fā)展歷史和CSS3的誕生柱锹。
誕生
????????1990年哪自，Web先驅(qū)Time Berners--Lee和Robert Calliau一起發(fā)明了Web，并在1994年Web真正走出了實驗室禁熏，從Web(HTML)被發(fā)明開始壤巷，網(wǎng)頁樣式一直以各種形式存在， 但是網(wǎng)頁的樣式此時掌握在瀏覽器開發(fā)商手里瞧毙，能控制的顯示也很少胧华，為了滿足網(wǎng)頁設(shè)計者的不斷提升的要求，網(wǎng)頁增加了越來越多的顯示功能宙彪，變得越來越復(fù)雜矩动，頁面越來越臃腫，于是CSS誕生了释漆，其實當(dāng)時業(yè)界也提出了一些統(tǒng)一樣式語言的建議悲没，但是CSS是第一個具有“層疊”意義（繼承、覆蓋男图、設(shè)計靈活）的樣式表語言示姿，這門語言是在1994年由哈坤·利提出來的建議，并在伯特·波斯當(dāng)時在設(shè)計的Web瀏覽器Argo上得到了應(yīng)用逊笆，最終在1996年栈戳，W3C正式推出了CSS第一個規(guī)范，這就是CSS1难裆。CSS1推出之前我們可以稱之為CSS0時代（非規(guī)范）子檀。
css1
????CSS1提供有關(guān)字體、顏色乃戈、位置和文本屬性的的基本信息褂痰，該版本得到了目前可解析XML和HTML的瀏覽器的廣泛支持，應(yīng)用樣式到標(biāo)記系統(tǒng)的方式（可用樣式屬性和聲明方式）主要有：
選擇器：要使用CSS對HTML頁面中的元素實現(xiàn)一對一偏化、一對多脐恩、多對一的樣式控制，就必須使用到選擇器侦讨，選擇器大致可分為Id選擇器驶冒、類選擇器、上下文選擇器（通過元素位置的上下文關(guān)系來定義樣式韵卤，應(yīng)用或者避免某項規(guī)則骗污，CSS2中被成為派生選擇器 ），用來定義希望應(yīng)用樣式的HMTL元素或標(biāo)簽沈条。
屬性：屬性包含屬性名和值需忿，中間已冒號隔開，屬性通常包含在規(guī)則塊里（｛｝包裹），按照作用屬性大致可分為字體屋厘、顏色涕烧、位置、大小汗洒、邊距议纯、邊框等，主要是定義網(wǎng)頁以及網(wǎng)頁元素的展示溢谤。
偽類與偽元素：偽類和偽元素都是用于向某些選擇器設(shè)置的特殊效果瞻凤，以冒號區(qū)隔比如a:acvtive{}
css2
CSS2是對CSS1的補充，屬于包含關(guān)系世杀，CSS2拓展了選擇器阀参，充實了樣式單的功能，推薦的是內(nèi)容和表現(xiàn)分離的方式來應(yīng)用樣式瞻坝，
css3
css3是目前最新的一版蛛壳，相對于css2選擇器更加豐富、樣式屬性也更加豐富湿镀，增加增強了一些顯示效果（如）動畫炕吸，以前一些需要在js或者用圖片實現(xiàn)的效果，現(xiàn)在可以考慮用Css來實現(xiàn)了勉痴。還有一個比較重要的一點，之前CSS中一些存在兼容的問題树肃，在CSS3中得到了標(biāo)準(zhǔn)的支持蒸矛。
2，F(xiàn)FC(Flexible Formatting Context)
????????CSS3引入了一種新的布局模型——flex布局(之前有文章介紹過)胸嘴。flex是flexible box的縮寫雏掠，一般稱之為彈性盒模型。和CSS3其他屬性不一樣劣像，flexbox并不是一個屬性乡话，而是一個模塊，包括多個CSS3屬性耳奕。flex布局提供一種更加有效的方式來進行容器內(nèi)的項目布局绑青，以適應(yīng)各種類型的顯示設(shè)備和各種尺寸的屏幕，使用Flex box布局實際上就是聲明創(chuàng)建了FFC(自適應(yīng)格式上下文)屋群，具體自定義格式上下文有什么特性闸婴，也可以參考我之前寫的文章《盒模型和布局》。
????????在布局的時候芍躏，較早時經(jīng)常會使用浮動邪乍，使用浮動的元素會脫離文檔流，那文檔流到底是什么東西呢？ "流"是render tree（渲染樹）在布局時的一個概念庇楞。
css2.1 中有相關(guān)的定義：
從上我們知道渲染數(shù)布局時依據(jù)的位置規(guī)則（當(dāng)然還有大小榜配，所占的空間），也就是說我們所說的流實際上規(guī)定了元素怎么排放以及相互作用（之前講的渲染規(guī)則）吕晌。在CSS中主要有三種流： normal flow（普通流芥牌，我們經(jīng)常將的脫離，脫離的就是它）聂使、floats壁拉、Absolute Posioning（position不為static、relative）柏靶。FFC屬于normal flow里的一個上下文概念弃理，是普通流的一種，而浮動流和定位流以及CSS其他屬性對FFC是有影響的屎蜓，主要表現(xiàn)在以下幾點:
[1] float痘昌、clear和vertical-align屬性在伸縮項目上沒有效果
[2] 伸縮容器的margin與其內(nèi)容的margin不會重疊
[3] text-align屬性在伸縮容器上沒有效果，因為其只可應(yīng)用于塊級block容器
[4] 另外炬转，columns屬性伸縮容器上沒有效果
備注：
脫離文檔流辆苔，也就是將元素從普通的布局排版中拿走，其他盒子在定位的時候扼劈，會當(dāng)做脫離文檔流的元素不存在而進行定位驻啤。需要注意的是，使用float脫離文檔流時荐吵，其他盒子會無視這個元素骑冗，但其他盒子內(nèi)的文本依然會為這個元素讓出位置，環(huán)繞在周圍先煎。而對于使用absolute positioning脫離文檔流的元素贼涩，其他盒子與其他盒子內(nèi)的文本都會無視它。
3薯蝎，GFC(GridLayout Formatting Context)
????????也是在《盒模型和布局》中我們用table來實現(xiàn)了一個傳統(tǒng)的三欄布局遥倦，這實際上是一種二維布局方式，CSS3中增加的GFC也是實現(xiàn)二維布局的方式占锯，而且比table提供了更好的細(xì)節(jié)和控制袒哥。
????????GFC(GridLayout Formatting Contexts)直譯為"網(wǎng)格布局格式化上下文"，當(dā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的應(yīng)用范式和flex有點像疑俭，以后我們專門介紹下此種布局方式（bootstrap css類庫 里面模擬實現(xiàn)了網(wǎng)格布局）粮呢，這里我們不展開敘述，我們只需知道和FFC一樣，GFC也定義了特殊的渲染規(guī)則啄寡，也屬于普通流的一種豪硅。
