CSS中的BFC、IFC、GFC和FFC是布局模型中的概念，用于描述元素在檔案流中的布局行為，它們分別代表塊級格式化背景關系（Block Formatting Context）、行內級格式化背景關系（Inline Formatting Context）、網格格式化背景關系（Grid Formatting Context）和自適應格式化背景關系（Flexbox Formatting Context），
塊級格式化背景關系（BFC）
塊級格式化背景關系是一個獨立的渲染區域，內部元素的布局不會影響外部元素，在BFC中，盒子從頂端開始排列，垂直方向上一個接一個，兩個框之間的垂直距離由margin決定，在一個BFC中，兩個相鄰的Box的margin會發生重疊，
BFC的創建方式包括：
- float不為none
- position為absolute或fixed
- display為inline-block、table-cell、table-caption
- 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，可以實作各種各樣的彈性布局效果，例如水平居中、垂直居中、等間距布局等等，
作者：施主來了
鏈接：https://juejin.cn/post/7205016004924375077
來源：稀土掘金
著作權歸作者所有，商業轉載請聯系作者獲得授權，非商業轉載請注明出處，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/545350.html
標籤：Html/Css