世界速读：CSS中的BFC、IFC、GFC、FFC

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

世界速读：CSS中的BFC、IFC、GFC、FFC

2023-02-28 14:17:22 来源：博客园

(资料图)

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来源：稀土掘金著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

关键词：方式包括毫不相干可以实现