BFC 定义
BFC(Block formatting context)直译为“块级格式化上下文”。它是一个独立的渲染区域，只有 Block-level box 参与，它规定了内部的
Block-level box 如何布局，并且与这个区域外部毫不相干。
首先了解一下Box Formatting Context的相关概念。
Formatting Context
Formatting Context是W3C CSS2.1 规范中的一个概念，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素如何定位，以及和其他元素的关系和相互作用。最常见的Formatting context 有Block formatting context（简称BFC）和 Inline formatting context（简称IFC）。
Box：css布局的基本单位
Box 是 css 布局的对象和基本单位，一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。不同类型的 Box，会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此 Box 内的元素会以不同的方式渲染。有哪些盒子呢：
- block-level box：display属性为 block, list-item, table 的元素，会生成 block-level box.并且参与 block formatting context.
- inline-level box：display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context.
- run-in box: css3中才有。
BFC
BFC是一个独立的布局环境，其中的元素布局时不受外界的应i昂，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
BFC的布局规则
- 内部的Box会在垂直方向，一个接一个的放置。
- Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。
- 每个盒子的margin box的左边，与包含块border box 的左边想接触（对于从左往右的格式化，否则相反）。即使存在浮动也是如此。
- BFC的区域不会与float box 重叠。
- BFC就是页面上的一个隔离的独立容器，容器里的子元素不会影响到外面的元素，反之也如此。
- 计算BFC的高度时，浮动元素也参与计算。
如何创建（触发）BFC
- html根元素本身就是一个BFC元素（body元素不是）
- 浮动元素：float 除了 none 以外的值
- 绝对定位元素： position: absolute / fixed
- display: inline-block / table-cells / flex
- overflow: 除了 visible 以外的值 （hidden / auto / scroll）
BFC 作用
1. 利用BFC避免margin重叠
eg：
根据第二条，属于同一个BFC的两个相邻Box会发生margin重叠，所以我们可以设置两个不同的BFC。：把第一个 p 用 div 包裹，然后激活它成为一个 BFC。
2. 自适应两栏布局
根据 每个盒子的margin box 的左边，与包含块border box 的左边想接触，即使存在浮动也是如此。
eg：
利用 BFC的区域不会与float box 重叠，我们可以rangright成为单独的BFC。
right会自动的适应宽度，这时候就形成了一个两栏自适应的布局。
3. 清除浮动
当我们不给父节点设置高度，子节点设置了浮动的时候，父节点会发生高度塌陷，这是要用清除浮动。
eg：
这时候可以根据 计算BFC的高度是，浮动元素也参与计算，给父节点激活BFC。
参考：《BFC详解》
