王志远，微医云服务前端技术部
前言
块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则，具体有六条，我是这样记忆和应用的：
渲染规则
三条应用性，如
- 同一 BFC下相邻盒会出现 margin合并问题，这样，当我们希望盒间距是 margin叠加时，就可以让其中一个盒子处于另一个 BFC下，比如 overflow为 hidden的盒子，这样不处于同一 BFC就破坏了合并以实现效果
- 又如两列左定宽右自适应布局，在 BFC中，存在规则BFC容器不与浮动元素合并，那我们就可以设置左定宽元素为浮动元素，右自适应元素为 BFC元素即可
- 最后一条是清除浮动，BFC元素会计算浮动元素的高度，这也就意味着我们只要将父容器设置为 BFC，就可以自然的解决浮动元素造成的高度塌陷问题
剩下三条是概念性规则，分别是
- BFC内盒垂直排列
- BFC元素和父容器左侧接触
- BFC内部和外界相互独立、互不影响
由这些规则共同构成 BFC容器下的渲染结果；而形成 BFC也很简单，有五条规则，我认为是 1+3+1；
形成规则
- root容器，即 HTML默认是 BFC
- 三个布局
-
- display为表格类元素（table-cell、table、table-caption）、inline-block行内块元素、新型布局元素（flex、inline-flex、grid）
- position为 fixed、absolute（不是 static或 relative）
- float为 left、right（不是 none）
- overflow为 auto、scroll、hidden（不是 visible）
案例记忆
文字太过枯燥，按照渲染规则，我们来一一验证下。
案例查看地址： http://82.157.62.28:3000/#/bfc-cache
一、同一 BFC下相邻盒会出现 margin合并问题
解读： 原始样式，会出现上下边距合并现象；点击后将下内容包裹在另一个 bfc中，从而解决 margin合并问题
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align: center;
}
.p1 {
margin-bottom: 10px;
}
.p2 {
margin-top: 30px;
}
二、BFC容器不与浮动元素合并
解读： 左侧浮动，右侧 bfc实现两列布局
三、清浮动：BFC元素会计算浮动元素的高度
解读： 浮动会导致父容器高度塌陷，而 BFC元素会计算浮动元素的高度，将父容器设置成 bfc元素就可以清浮。
另外三条非实战，就没实战案例了。
