BFC布局规则与其他CSS格式化上下文介绍

BFC 布局规则

BFC 是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离。BFC 的主要作用是防止浮动元素对文本流产生影响。

BFC 的形成条件有以下几个：

• 根元素
• 浮动元素
• 绝对定位元素
• flex 元素
• grid 元素

当一个元素满足上述条件中的任意一个时，它就会形成一个新的 BFC。

BFC 的特性有以下几个：

• BFC 内部元素不会受到 BFC 外部元素的影响。
• BFC 内部元素的布局不受 BFC 外部元素的影响。
• BFC 内部元素的浮动不会影响 BFC 外部的元素。

其他 CSS 格式化上下文

除了 BFC 之外，CSS 中还有其他几个格式化上下文，包括：

• 浮动上下文
• 定位上下文
• flexbox 上下文
• grid 上下文

浮动上下文是指一个元素的浮动属性为 left 或 right 时，该元素所在的块级元素形成的格式化上下文。浮动元素会脱离正常的文档流，并根据其浮动属性定位在块级元素的左边缘或右边缘。

定位上下文是指一个元素的定位属性为 absolute 或 fixed 时，该元素所在的块级元素形成的格式化上下文。定位元素会脱离正常的文档流，并根据其定位属性定位在页面中的某个位置。

flexbox 上下文是指一个元素的 display 属性为 flex 或 inline-flex 时，该元素所在的块级元素形成的格式化上下文。flexbox 元素可以在水平方向或垂直方向上排列其子元素，并且可以控制子元素的尺寸和对齐方式。

grid 上下文是指一个元素的 display 属性为 grid 或 inline-grid 时，该元素所在的块级元素形成的格式化上下文。grid 元素可以将子元素排列成网格状，并且可以控制网格的列数、行数、间隙以及子元素的大小。

不同格式化上下文的比较

下表比较了不同格式化上下文的特点：

格式化上下文	形成条件	特性
BFC	根元素、浮动元素、绝对定位元素、flex 元素、grid 元素	BFC 内部元素不会受到 BFC 外部元素的影响；BFC 内部元素的布局不受 BFC 外部元素的影响；BFC 内部元素的浮动不会影响 BFC 外部的元素。
浮动上下文	元素的浮动属性为 left 或 right	浮动元素会脱离正常的文档流，并根据其浮动属性定位在块级元素的左边缘或右边缘。
定位上下文	元素的定位属性为 absolute 或 fixed	定位元素会脱离正常的文档流，并根据其定位属性定位在页面中的某个位置。
flexbox 上下文	元素的 display 属性为 flex 或 inline-flex	flexbox 元素可以在水平方向或垂直方向上排列其子元素，并且可以控制子元素的尺寸和对齐方式。
grid 上下文	元素的 display 属性为 grid 或 inline-grid	grid 元素可以将子元素排列成网格状，并且可以控制网格的列数、行数、间隙以及子元素的大小。