目錄：
1.背景介紹
2.知識剖析
3.常見問題
4.解決方案
5.編碼實戰
6.擴充套件思考
7.參考文獻
8.更多討論
一，背景介紹
什麼是fc？
fc的全稱是：formatting contexts，是w3c css2.1規範中的乙個概念。它是頁面中的一塊渲染區域，並且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關係和相互作用。
二，知識剖析
官方文件對於bfc的定義：
mdn解釋：https：
塊格式化上下文（block formatting context，bfc）是web頁面的視覺化css渲染的一部分，是布局過程中生成塊級盒子的區域，也是浮動元素與其他元素的互動限定區域。
下列方式會建立塊格式化上下文：
建立了塊格式化上下文的元素中的所有內容都會被包含到該bfc中。
塊格式化上下文對浮動定位（參見
float）與清除浮動（參見
clear）都很重要。浮動定位和清除浮動時只會應用於同乙個
bfc內的元素。浮動不會影響其它bfc中元素的布局，而清除浮動只能清除同一bfc中在它前面的元素的浮動。外邊距摺疊（
margin collapsing
）也只會發生在屬於同一bfc的塊級元素之間。
css規範：
9.4.1塊格式化上下文
浮點數，絕對定位的元素，阻止不是塊框的容器（例如內聯塊，**單元格和**標題），以及除「可見」之外的「溢位」的塊框（除非該值已被傳播）到視口）為其內容建立新的塊格式化上下文。
在塊格式化上下文中，框從乙個包含塊的頂部開始乙個接乙個地垂直排列。
兩個兄弟框之間的垂直距離由「邊距」屬性決定。
塊格式化上下文中相鄰塊級框之間的垂直邊距摺疊。
在塊格式化上下文中，每個框的左外邊緣觸控包含塊的左邊緣（從右到左格式化，右邊緣觸控）。
即使存在浮點數也是如此（儘管盒子的線框可能因浮動而縮小），除非盒子建立新的塊格式化上下文（在這種情況下，盒子本身可能因浮動而變窄）。
浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如inline-blocks，table-cells，和table-captions），以及溢位值不為「visiable」的塊級盒子，都會為他們的內容建立新的塊級格式化上下文。
在乙個塊級格式化上下文裡，盒子從包含塊的頂端開始垂直地乙個接乙個地排列，兩個盒子之間的垂直的間隙是由他們的邊緣值所決定的。兩個相鄰的塊級盒子的垂直外邊距會發生疊加
。在塊級格式化上下文中，每乙個盒子的左外邊緣（保證金左）會觸碰到容器的左邊緣（左邊框）（對於從右到左的格式來說，則觸碰到右邊緣），即使存在浮動也是如此，除非這個盒子建立乙個新的塊級格式化上下文。
三。常見問題||
四。解決方案||
五。編碼實戰
1.bfc特性及應用？
（1）家教嚴格 - 包裹浮動
css部分
應用bfc後：
（2）減少隔預 - 同乙個bfc下相鄰兩個盒子外邊距會發生摺疊（合併）
css部分
（3）化敵為友 - 自適應兩列布局
css部分
2.如何觸發bfc？
1. body根元素
2.浮動元素：float除無以外的值。
3.絕對定位元素：position（絕對，固定）
4.display為內聯塊，**單元格，flex，flow-root
5.overflow除了可見以外的值（隱藏，自動，滾動）
六，擴充套件思考
什麼是ifc？
ifc（inline formatting contexts）直譯為「內聯格式化上下文」
ifc一般有什麼用呢？
水平居中：當乙個塊要在環境中水平居中時，設定其為inline-block則會在外層產生ifc，通過文字對齊則可以使其水平居中。
垂直居中：建立乙個ifc，用其中乙個元素撐開父元素的高度
，然後設定其垂直對齊：中間，其他行內元素則可以在此父元素下垂直居中
。七。參考文獻
參考資料：https：為什麼這麼多人講不清楚bfc
參考資料：https： css3中的bfc，ifc，gfc和ffc
參考資料：https： 10分鐘理解bfc原理
八。更多討論
css3時代下，bfc何去何從？
修真院web小課題 如何使用sass？
1.背景介紹 關於sass sass 的開發文件中如此描述自己 sass 是 css 的乙個擴充套件,它使 css 的使用起來更加優雅和強大。sass 的終極目標是解決 css 的缺陷。如我們所知，css 並不是乙個完美的語言。css 雖然簡單易學，卻也能迅速製造嚴重的混淆，尤其是在工程浩大的專案中...
修真院小課堂 z index初解，工作原理
今天給大家分享一下，修真院官網前端任務4，深度思考中的知識點 z index初解，工作原理 一，背景介紹 1.含義 z index屬性指定了元素及其子元素的 z順序 而 z順序 可以決定當元素 發生覆蓋的時候，哪個元素在上面。通常乙個較大的z index值的元素會覆蓋較低的那乙個 前提是元素支援z ...
IT修真院是個什麼樣的機構？
教你成為正直純潔善良的程式設計師的機構 昨天寫了一堆的東西，提交的時候沒有了。今天重來。第一。修真院是乙個和傳統培訓機構截然不同的it培訓機構。第二。修真院是乙個希望能夠給培訓機構正名的it培訓機構。第三。修真院是乙個已經證明了自己，還要證明的更多的it培訓機構。第四。修真院是乙個沒什麼節操的it培...