CSS中的BFC、IFC、GFC、FFC

CSS中的BFC、IFC、GFC和FFC是佈局模型中的概念，用於描述元素在文檔流中的佈局行為。它們分別代表塊級格式化上下文（Block Formatting Context）、內聯級格式化上下文（Inline Formatting Context）、網格格式化上下文（Grid Formatting Context）和自適應格式化上下文（Flexbox Formatting Context）。

塊級格式化上下文（BFC）

塊級格式化上下文是一個獨立的渲染區域，內部元素的佈局不會影響外部元素。在BFC中，盒子從頂端開始排列，垂直方向上一個接一個，兩個框之間的垂直距離由margin決定。在一個BFC中，兩個相鄰的Box的margin會發生重疊。

BFC的創建方式包括：

1. float不為none
2. position為absolute或fixed
3. display為inline-block、table-cell、table-caption
4. overflow不為visible

BFC常用於解決margin重疊的問題，可以通過將元素設為BFC來避免margin重疊。BFC還可以清除浮動，將一個容器設為BFC可以防止其內部的浮動元素對外部元素造成影響。另外，BFC還可以實現兩欄佈局等效果。

內聯級格式化上下文（IFC）

內聯級格式化上下文是一行內元素的渲染區域，內部元素的佈局受到相鄰元素的影響。在IFC中，盒子按照從左到右的順序排列，可以通過vertical-align屬性來垂直對齊。IFC中的line box高度由其行內盒子中最高的計算值而定。

IFC的創建方式包括：display為inline、inline-block、inline-table或者table-cell。

IFC常用於實現行內元素的垂直對齊，可以通過將一組行內元素放置在一個IFC內來實現垂直對齊的效果。IFC還可以實現一些特殊的佈局效果，例如等高佈局。

網格格式化上下文（GFC）

網格格式化上下文是CSS Grid Layout中的一個概念，規定了內部網格元素的佈局方式，且與外部毫不相干。網格佈局通過將容器劃分為網格行和網格列來定義佈局，容器中的每個子元素占據一個或多個網格，用於控制網格容器中網格項的佈局方式。

自適應格式化上下文（FFC）

自適應格式化上下文是一個獨立的渲染區域，只有Flexbox參與，它規定了內部Flexbox元素的佈局方式，且與外部毫不相干。用於控制flex容器中flex項的佈局方式，FFC內的元素會按照一定規則自適應排列。

FFC是Flexbox佈局中的一個概念，用於控制flex容器中flex項的佈局方式。通過FFC，可以實現各種各樣的彈性佈局效果，例如水平居中、垂直居中、等間距佈局等等。