块格式化上下文

水深无声 2021-06-26 16:06 400阅读 0赞

块格式化上下文（**`Block Formatting Context，BFC`**）是Web页面的可视化`CSS`渲染的部分，是块级盒布局发生的区域，也是浮动元素与其他元素交互的区域。有这几种框会为其内容创建新的块格式化上下文：浮动框、绝对定位框、非块框的块容器（例如`inline-blocks、table-cells`和`table-captions`）、“`overflow`”属性非“`visible`”的块框（除非这个值已扩散到整个视口）。

在块格式化上下文中，框会从包含块的顶部开始，一个接一个地，垂直向下地摆放。两个兄弟框之间的垂直距离由“`margin`”属性来决定。在同一个块格式化上下文中，相邻的块级框之间的垂直外边距会出现折叠。每个框的左外边距边要紧贴其包含块的左边。即使在有浮动的情景下也是如此，除非框创建了一个新的块格式化上下文（在这种情况下该框可能会为了避开浮动框而变窄）。

创建块格式化上下文的方式如下：

*  根元素或其它包含它的元素
 *  浮动元素 （元素的`float`不是`none`）
 *  绝对定位元素 （元素的`position`为`absolute`或`fixed`）
 *  内联块元素 （元素具有`display: inline-block`）
 *  表格单元格 （元素具有`display: table-cell`，HTML表格单元格默认属性）
 *  表格标题 （元素具有`display: table-caption`, HTML表格标题默认属性）
 *  匿名表格元素 （元素具有`display:table,table-row,table-row-group,table-header-group,table-footer-group`\[分别是`HTML tables, table rows, table bodies, table headers and table footers`的默认属性\]，或`inline-table`）
 *  `overflow`值不为`visible`的块元素，
 *  `display`值为`flow-root`的元素
 *  `contain`值为`layout,content`, 或`strict`的元素
 *  弹性元素 （`display: flex`或`inline-flex`元素的子元素）
 *  网格元素（`display: grid`或`inline-grid`元素的子元素）
 *  多列容器 （元素的`column-count`或`column-width`不为`auto`即视为多列，`column-count:1`的元素也属于多列）
 *  即便具有`column-span: all`的元素没有被包裹在一个多列容器中，`column-span:all`也始终会创建一个新的格式化上下文。

块格式化上下文包含创建它的元素内的所有内容。  
块格式化上下文对于定位 （参见`float`） 与清除浮动 （参见`clear`） 很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。浮动不会影响其它块格式化上下文中元素的布局，并且清除浮动只能清除同一块格式化上下文中在它前面的元素的浮动。`Margin collapsing`也只发生在属于同一块格式化上下文的块级元素之间 。

## CSS BFC（格式化上下文）深入理解 ##

### 什么是`BFC` ###

在解释`BFC`之前，先说一下文档流。我们常说的文档流其实分为**定位流、浮动流和普通**流三种。而普通流其实就是指`BFC`中的`FC`。`FC`是`formatting context`的首字母缩写，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。常见的`FC`有`BFC、IFC`，还有`GFC`和`FFC`。`BFC`是`block formatting context`，也就是块级格式化上下文，是用于布局块级盒子的一块渲染区域

### 触发条件 ###

满足下列条件之一就可触发`BFC`

1、根元素，即HTML元素  
2、`float`的值不为`none`  
3、`overflow`的值不为`visible`  
4、`display`的值为`inline-block、table-cell、table-caption`  
5、`position`的值为`absolute`或`fixed`

## 作用 ##

`BFC`是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然。它与“普通的块框”类似，但不同之处在于:

1、可以阻止元素被浮动元素覆盖  
2、可以包含浮动元素  
3、属于同一个`BFC`的两个相邻块级子元素的上下`margin`会发生重叠，(设置`writing-mode:tb-rl`时，水平`margin`会发生重叠)。所以当两个相邻块级子元素分属于不同的`BFC`时可以阻止`margin`重叠

【1】可以阻止元素被浮动元素覆盖

效果展示：  
通过改变内容为`BFC`，背景为浅绿色的盒子的属性，使其成为`BFC`，以此阻止被深绿色的浮动盒子覆盖  
![在这里插入图片描述][20190827154423769.png]  
【2】可以包含浮动元素

效果展示：  
操作天蓝色区域的属性，使其成为`BFC`。就可以包含住浮动元素  
![在这里插入图片描述][2019082715445418.png]

【3】属于同一个`BFC`的两个相邻块级子元素的上下`margin`会发生重叠，(设置`writing-mode:tb-rl`时，水平`margin`会发生重叠)。所以当两个相邻块级子元素分属于不同的`BFC`时可以阻止`margin`重叠

效果展示：  
深红色背景的块级盒子二的外面包一个`div`，通过改变此`div`的属性使红色盒子与绿色盒子分属于两个不同的`BFC`，以此来阻止`margin`重叠  
![在这里插入图片描述][2019082715455885.png]

[20190827154423769.png]: /images/20210626/4190248711c64988914ed50cef4c55ad.png
[2019082715445418.png]: /images/20210626/b9f93ed5470140df8ab0838cba987ac1.png
[2019082715455885.png]: /images/20210626/80682b90496f4f5bb2d8b16b987616b9.png