BFC
BFC(Block Formatting Contexts)意為“塊級格式化上下文”。就是頁面上的一個渲染區(qū)域，容器內的子元素不會對外面的元素布局產生影響，反之亦然。如何生成BFC：
float的值不為none;
overflow的值不為visible;
position的值不為relative和static;
display的值為table-cell,table-caption何inline-block中的任何一個。
IFC
IFC(Inline Formatting Contexts)意為“內聯(lián)格式化上下文”,IFC中，盒子依次水平放置，從包含塊的頂部開始。
GFC
GFC(GridLayout Formatting Contexts)意為“網格布局格式化上下文”當一個元素設置為display:grid的時候，此元素將獲得一個獨立的渲染區(qū)域，可以在網格容器上定義網格行和列，為每一個網格定義位置和空間。GFC和table的區(qū)別在于GridLayout會有更加豐富的屬性來控制行列，控制對齊以及更為精細的渲染。
FFC
FFC(Flex Formatting Contexts)意為“自適應格式化上下文”,display值為flex或者inline-flex的元素將會生成自適應容器，當前只有谷歌和火狐支持該屬性，不過在移動端幾乎沒有障礙(移動端是chrome和Safari的天下)。flex box由伸縮容器和伸縮子元素組成。通過設置元素display:flex/inline-flex可以得到伸縮容器，前者為塊級元素，后者為行內元素。伸縮容器外元素不受影響
BFC IFC GFC FFC
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。
- 文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
- 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上，一...
- 文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
- 正文 年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發(fā)生泄漏。R本人自食惡果不足惜，卻給世界環(huán)境...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背。 一陣腳步聲響...
推薦閱讀更多精彩內容
- 幾個概念，與相關需要挖掘細節(jié)的地方。另外再來幾個布局的實例。 格式化上下文 和 盒子 算是 CSS 里最細節(jié)的概念...
- BFC 已經是一個耳聽熟聞的詞語了，網上有許多關于 BFC 的文章，介紹了如何觸發(fā) BFC 以及 BFC 的一些用...
- FC：formatting context 格式化上下文。css2.1定義了 BFC 塊級格式化上下文 + IFC...
