在解释BFC之前，我们需要了解一下我们常说的HTML的文档流。
文档流
文档流，其实就是指BFC中的FC，FC(Formatting Context)，格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。
其实文档流根据元素在排版中的定位类型分为三种，分别为：
- 标准流
- 浮动流
- 定位流
1. 标准流
也叫普通流，就是我们常说的文档流，指的是HTML中元素在计算布局排版的过程中，所有处于文档流中的元素会自动的从左到右(非块级元素)，从上到下(块级元素)的排列规则。
标准流文档布局.png
2. 浮动流
使用float使元素脱离了标准的文档流，会导致其他处于文档流中的盒子在计算布局排版时环绕在它的周边，需要时可以设置 clear 属性来清除浮动。
注意: 浮动会使元素脱离文档流，但是不会脱离文本流，在其他盒子的文本内容在计算布局时，浮动元素还是占位置的。
文本流：指的是元素内部的一系列的字符的排列规则。
我们可以看到p2，p3元素在计算布局位置的时候，无视了开启浮动的p1元素的位置，从body元素的最左边开始布局，而他们内部的文本却并没有无视p1元素的位置。
浮动流布局.png
-
定位流（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的作用
-
清除浮动
-- 一个标准的文档流的块级元素可能被一个float元素覆盖，挤占正常的文档流，设置BFC这可以避免这种问题 -
阻止相邻元素的上下margin合并
-
用于解决容器元素高度塌陷问题
<style>
#div1, #div3 {
width: 100px;
height: 100px;
background: red;
margin-top: 20px;
margin-bottom: 20px;
}
<style>
没有使用BFC的布局.png
如果想避免这种情况，可以给这两个 div 裹上一个 BFC。
<style>
.box {
overflow: hidden;
}
</style>
<div class="box">
<div id="div1"></div>
</div>
<div class="box">
<div id="div3"></div>
</div>
使用BFC后的布局.png
浮动元素脱离了正常的文档流，一般情况下，计算容器元素的高度时，是不会考虑浮动元素的高度，则会导致容器元素的内部塌陷；
但是当容器元素就使用了 BFC，则不会一起塌下，容器元素的高度会根据子元素的高度自动撑开。
<style>
.container {
/* overflow: hidden; */
padding: 5px;
border: 1px solid #000;
}
.box {
float: left;
width: 100px;
height: 100px;
background-color: cornflowerblue;
}
</style>
<div class="container">
<div class="box"></div>
</div>
高度塌陷问题解决.png
网友评论