BFC 块级格式化上下文

在解释BFC之前，我们需要了解一下我们常说的HTML的文档流。

文档流

文档流，其实就是指BFC中的FC，FC(Formatting Context)，格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。

其实文档流根据元素在排版中的定位类型分为三种，分别为：

• 标准流
• 浮动流
• 定位流

1. 标准流

也叫普通流，就是我们常说的文档流，指的是HTML中元素在计算布局排版的过程中，所有处于文档流中的元素会自动的从左到右(非块级元素)，从上到下(块级元素)的排列规则。

标准流文档布局.png

2. 浮动流

使用float使元素脱离了标准的文档流，会导致其他处于文档流中的盒子在计算布局排版时环绕在它的周边，需要时可以设置 clear 属性来清除浮动。

注意: 浮动会使元素脱离文档流，但是不会脱离文本流，在其他盒子的文本内容在计算布局时，浮动元素还是占位置的。

文本流：指的是元素内部的一系列的字符的排列规则。

我们可以看到p2，p3元素在计算布局位置的时候，无视了开启浮动的p1元素的位置，从body元素的最左边开始布局，而他们内部的文本却并没有无视p1元素的位置。

浮动流布局.png

3. 定位流（position: absolute或fixed）

注意：使用定位会同时使元素脱离标准的文档流和文本流，在其他盒子的文本内容在计算布局时，定位元素不占位置

• 对于position: absolute，元素定位将相对于上级元素中最近的一个使用了relative、fixed、absolute的元素，如果没有则相对于body；
• 对于position：fixed，元素的定位则是相对于浏览器窗口；

定位流布局.png

脱离文档流：指的是元素脱离正常元素的布局排版规则，其他处于文档流中的盒子在计算布局排版时,会自动无视已脱离文档流的元素来进行定位。

BFC(Block Formatting Context)块级格式化上下文

BFC是用于布局块级盒子的一块渲染区域，你可以将一个 BFC 可以理解为一个容器，里面的元素不会影响到容器外的布局；

可以简单理解为一个元素的内部子元素无论尺寸、定位如何变化，都不会影响外部元素的定位和尺寸

注意：一个BFC的范围包含其容器内的所有子元素，但不包含其子元素的下级元素

形成BFC常见条件：

• 根元素，也就是 HTML 元素
• 浮动元素，即float不是none
• 定位元素，position是absolute或者fixed
• overflow不是visible的元素，如overflow:hidden
• 行内块元素（display：inline-block）
• display值为 table、flex、grid

BFC的作用

1. 清除浮动
   -- 一个标准的文档流的块级元素可能被一个float元素覆盖，挤占正常的文档流，设置BFC这可以避免这种问题

2. 阻止相邻元素的上下margin合并

3. 用于解决容器元素高度塌陷问题

使用BFC后的布局.png

浮动元素脱离了正常的文档流，一般情况下，计算容器元素的高度时，是不会考虑浮动元素的高度，则会导致容器元素的内部塌陷；
但是当容器元素就使用了 BFC，则不会一起塌下，容器元素的高度会根据子元素的高度自动撑开。

高度塌陷问题解决.png