什么是 BFC
BFC 称为块级格式化上下文
它会创建一个特殊的区域，在这个区域中只有 block box 参与布局，而BFC的一套规则就规定了在这个特殊的区域中如何进行布局，如何进行定位，区域内元素的相互关系和相互作用，这个特殊的区域不受外界影响。
block box 是指 display 属性为 block、list-item、table 的元素，相应的还有 inline box， 如 display 属性为 inline、inline-block、inline-table 的元素。
如何形成 BFC
那么什么样的情况会创建一个 BFC 呢？MDN 总结如下：
- 根元素或其他包含它的元素
- 浮动元素(元素的 float 不是 none)
- 绝对定位元素(元素具有 position 为 absolute 或 fixed)
- 内联块(元素具有 display: inline - block)
- 表格单元格(元素具有 display: table - cell，HTML 表格单元格默认属性)
- 表格标题(元素具有 display: table - caption, HTML 表格标题默认属性)
- 具有 overflow 且值不是 visible 的块元素
- display: flow - root 的元素
- column - span: all 的元素
BFC 决定了什么
BFC 有自己的一套规则，包括：
- 内部的 box 将会独占宽度，且在垂直方向，一个接一个排列
- box 垂直方向的间距由 margin 属性决定，但是同一个 BFC 的两个相邻 box 的 margin 会出现边距折叠现象
- 每个 box 水平方向上左边缘，与 BFC 左边缘相对齐，即使存在浮动也是如此
- BFC 区域不会与浮动元素重叠，而是会依次排列
- BFC 区域内是一个独立的渲染容器，容器内元素和 BFC 区域外元素不会形成任何干扰
- 浮动元素的高度也参与到 BFC 高度的计算当中
从上述规则中总结出最关键的三点：边距折叠、清除浮动、自适应多栏布局。
BFC 实战应用
例题1：
<style>
body {
width: 600px;
position: relative;
}
.left {
width: 80px;
height: 150px;
float: left;
background: blue;
}
.right {
height: 200px;
background: red;
}
</style>
<div class="left"></div>
<div class="right"></div>
效果如下
如何在不修改已有样式情况下，加入新样式，实现自适应两栏布局。（.left 宽度固定，.right 占满剩下宽度）
根据 BFC 布局规则：“每个 box 水平方向上左边缘，与 BFC 左边缘相对齐。即使存在浮动也是如此”，因此 .left 和 .right 的左边相接触。
所以就会出现 .right(普通box) 与 .left(BFC) 左边缘对其，即使 .left 是浮动的。
BFC 布局规则还有这样一条： BFC 区域不会与浮动元素重叠，而是会依次排列。
那么就可以使 .right 形成 BFC，在 .right 中添加 overflow: hidden; 形成 BFC。
<style>
.right {
height: 200px;
background: red;
overflow: hidden;
}
</style>
例题2：
<style>
.root {
border: 5px solid green;
width: 300px;
}
.child {
border: 5px solid orange;
width: 100px;
height: 100px;
float: left;
}
</style>
<div class="root">
<div class="child child1"></div>
<div class="child child2"></div>
</div>
效果如下
因为 .child 为浮动元素，因此造成了“高度塌陷”现象，.root 的高度为 0。
那么如何解决“高度塌陷”问题呢？
BFC 规则中：浮动元素的高度也参与到 BFC 高度的计算当中，那么也就是说让 .root 形成 BFC，其中的浮动元素 .child 的高度也会参与到 .root 的高度计算中，为 .root 添加样式 overflow: hidden;
<style>
.root {
border: 5px solid green;
width: 300px;
overflow: hidden;
}
</style>
例题3：
<style>
p {
color: green;
background: orange;
width: 400px;
line-height: 100px;
text-align: center;
margin: 40px;
}
</style>
<p>p 1</p>
<p>p 2</p>
效果如下
常理来讲 两个 p 标签的间距应该为80px，那实际效果为何是40px？
BFC 规则有一条：box 垂直方向的间距由 margin 属性决定，但是同一个 BFC 的两个相邻 box 的 margin 会出现边距折叠现象。
两个 p 标签属于同一个 BFC ，因此两个 p 的 margin 就出现了边距折叠问题。
最简单的解决办法，我们可以在其中一个 p 标签外再包裹一个元素，并让这个外层元素形成 BFC ，那这两个 p 标签不再属于同一个 BFC，解决了边距重叠问题。
代码如下：
<style>
p {
color: green;
background: orange;
width: 400px;
line-height: 100px;
text-align: center;
margin: 40px;
}
.wrapper {
overflow: hidden;
}
</style>
<p>p 1</p>
<div class="wrapper">
<p>p 2</p>
</div>
完结
BFC 可以解决 css 中很多经典的问题，如边距折叠、多栏自适应、高度塌陷等问题。