返回

BFC、IFC、FFC、GFC——解构网站布局的四大盒子

前端

何谓盒子模型？

在网页布局中，盒子模型是一种用来和控制网页元素的布局和排列方式的概念。它将每个元素视为一个矩形盒子，并通过各种 CSS 属性来定义盒子的尺寸、位置、边距、内边距等属性。

BFC——块级格式化上下文

块级格式化上下文（Block Formatting Context，BFC）是一个独立的布局环境，其中的元素按照垂直方向排列，从上到下，不会受到外界的元素的影响。BFC 中的元素不会与其他 BFC 中的元素产生重叠或相互影响。

BFC 的特点：

  • 垂直方向排列，从上到下。
  • 元素不会与其他 BFC 中的元素产生重叠或相互影响。
  • BFC 中的元素可以包含其他元素。
  • BFC 可以通过 display: block;、float: left; 或 float: right; 等 CSS 属性来创建。

BFC 的作用：

  • 隔离元素，防止元素相互影响。
  • 创建多列布局。
  • 定位元素。
  • 清除浮动。

IFC——内联格式化上下文

内联格式化上下文（Inline Formatting Context，IFC）是一个独立的布局环境，其中的元素按照水平方向排列，从左到右，不会受到外界的元素的影响。IFC 中的元素可以与其他 IFC 中的元素产生重叠或相互影响。

IFC 的特点：

  • 水平方向排列，从左到右。
  • 元素可以与其他 IFC 中的元素产生重叠或相互影响。
  • IFC 中的元素不能包含其他元素。
  • IFC 可以通过 display: inline; 或 display: inline-block; 等 CSS 属性来创建。

IFC 的作用：

  • 隔离元素，防止元素相互影响。
  • 创建文字环绕效果。
  • 定位元素。

FFC——浮动格式化上下文

浮动格式化上下文（Floating Formatting Context，FFC）是一个独立的布局环境，其中的元素按照水平方向排列，从左到右，不会受到外界的元素的影响。FFC 中的元素可以与其他 FFC 中的元素产生重叠或相互影响。

FFC 的特点：

  • 水平方向排列，从左到右。
  • 元素可以与其他 FFC 中的元素产生重叠或相互影响。
  • FFC 中的元素可以包含其他元素。
  • FFC 可以通过 float: left; 或 float: right; 等 CSS 属性来创建。

FFC 的作用：

  • 隔离元素，防止元素相互影响。
  • 创建多列布局。
  • 定位元素。
  • 清除浮动。

GFC——网格格式化上下文

网格格式化上下文（Grid Formatting Context，GFC）是一个独立的布局环境，其中的元素按照网格的方式排列，从上到下，从左到右，不会受到外界的元素的影响。GFC 中的元素可以与其他 GFC 中的元素产生重叠或相互影响。

GFC 的特点：

  • 网格状排列，从上到下，从左到右。
  • 元素可以与其他 GFC 中的元素产生重叠或相互影响。
  • GFC 中的元素可以包含其他元素。
  • GFC 可以通过 display: grid; 等 CSS 属性来创建。

GFC 的作用：

  • 隔离元素，防止元素相互影响。
  • 创建多列布局。
  • 定位元素。
  • 清除浮动。