1. BFC 是什么？
BFC全称为块级格式上下文（Block Formatting Context），是一个独立的渲染区域，里面的元素按照一定规则进行排列。它可以解决常见的布局问题，比如浮动、清除浮动、两栏自适应布局等。BFC是 CSS 规范中的一个概念，是由 W3C 制定的。BFC 的原理涉及到 CSS 中的盒模型、浮动、定位和清除浮动等概念。
2. 如何创建BFC？
2.1 display属性
BFC 的创建与 display 属性有关，如下几个值会创建 BFC：
display: block;
display: inline-block;
display: table-cell;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;
display: list-item;
/* 创建BFC */
.container {
display: flex;
}
/* 不创建BFC */
.box {
display: inline-block;
}
2.2 float属性
在元素的 float 值不为 none 时，会创建一个 BFC。这是因为浮动元素具有一定的脱离文档流的特性，如果不清除浮动，就会出现各种排版问题。
/* 创建BFC */
.container::after {
content: '';
display: block;
clear: both;
}
/* 不创建BFC */
.box {
float: left;
}
2.3 overflow属性
为元素设置 overflow 属性值不为 visible 时，也会创建一个 BFC。对于滚动条的出现，也可以借助 BFC 实现。
/* 创建BFC */
.container {
overflow: hidden;
}
/* 不创建BFC */
.box {
overflow: visible;
}
3. BFC 的特性
3.1 BFC 的定位规则
在一个 BFC 中，每一个 Box 的左边必须与包含块的左边相接触，即使存在浮动也是如此。
.container {
overflow: hidden;
}
.box {
float: left; /* 浮动 */
margin-left: 10px;
}
/* 左边距为 10px */
这是因为在创建 BFC 的元素中，左侧是不能放置浮动元素的。这使得在页面上布局变得更加自然，减少了意外的盒子重叠等问题。
3.2 BFC 不重叠
在同一个 BFC 容器中的元素不会发生重叠现象，内部元素的 marging 也不会和外部元素产生重叠。
/* 元素不重叠 */
.container {
overflow: hidden;
}
.box {
width: 100px;
height: 100px;
background-color: blue;
}
/* 内外 margin 不重叠 */
.container {
overflow: hidden;
}
.box {
width: 100px;
height: 100px;
margin: 20px;
background-color: blue;
}
3.3 BFC 可以清除浮动
浮动元素是会影响周围其他元素位置的，如果不进行清除操作，就会出现边界问题，这时可以通过创建 BFC 实现清除浮动。在创建 BFC 的容器中设置 overflow 或 display 值不为 block 或 table 相关关键字，这是比较普遍的清除浮动方式。
/* 清除浮动 */
.container {
overflow: hidden;
}
3.4 BFC 可以实现两栏自适应布局
在同一 BFC 容器中，通过一个元素左浮动，一个元素右浮动，就可以实现两栏自适应布局。
.container {
overflow: hidden;
}
.left {
float: left;
width: 200px;
background-color: blue;
}
.right {
float: right;
width: 100px;
background-color: red;
}
/* 左栏宽200px，右栏宽100px，总宽400px */
4. 总结
BFC 可以帮助我们更好地实现一些布局效果，如清除浮动、自适应两栏布局等。它的产生和应用涉及到 CSS 中的盒模型、浮动、定位和清除浮动等概念。创建 BFC 的方式主要有三种，分别是设置 display 属性值、设置 float 属性值和设置 overflow 属性值。