BFC，Block Formatting Context, 中文翻译块格式化上下文，它是CSS渲染定位的概念，是用于确定块盒子的布局以及浮动相互影响范围的这么一个区域。为了进一步弄清楚BFC，我们应该首先复习一下CSS的盒模型，浮动以及定位的知识。
CSS盒模型
CSS中的盒模型包括块盒、行内盒以及匿名盒，我们分别来讨论。
块盒block box
- 当元素的display属性被设置为block时，该元素是块级元素。
- 在视图上，块元素占据块状空间，竖直堆叠排放。
- 每个块级元素至少生成一个块盒，有的元素生成多个块盒，比如li
行内盒inline box
- 当元素的display属性被设置为inline, inline-block, inline-table时，该元素就是行内元素。
- 在视图上，行内元素按行呈现。
- 行内元素生成的是行内盒。
匿名盒 anonymous box
匿名盒包括匿名块盒和匿名行内盒，没有名字，所有属性都是继承自父元素或者初始值。盒内一些没有使用任何标签的数据占据的空间就是匿名盒。
定位
CSS中，浏览器定位靠的就是盒模型以及盒模型上下文，盒模型就是定位的基本单位，有三种常用的定位方案，分别是：常规流， 浮动以及绝对定位。
常规流
- 常规流对应position:static或relative并且float:none时
- 常规流中，盒是一个个按序排列
- 对于块盒，是上下堆叠排列
- 对于行内盒，是左右排列
- 对于静态定位，盒的位置就是常规流中的位置
- 对于相对定位，盒的位置是按照top, left, right, bottom等确定的，并且偏移后原位置依然有效，不会被占用。#
浮动
- 将float属性设置为某个值，比如float: left即可触发浮动
- 这样的盒就是浮动盒
- 浮动的效果就是常规流会环绕在该盒子的周围
绝对定位
- 绝对定位依赖于将position属性设置为absolute或者fixed
- 绝对定位使得盒从常规流中被移除，但不会影响常规流
- 定位依赖容纳它的父盒子，没有的话则是body，具体位置由top,bottom,left,right确定
BFC
了解完以上盒模型盒定位的知识后，再来理解BFC就不难了。BFC是用于确定块盒子的布局以及浮动相互影响范围的这么一个区域
BFC创建方法
- 根元素或者其他包含当前元素的元素
- 使用浮动 float: left
- 绝对定位元素 position: absolute或者fixed
- 行内块 display: inline-block
- 表格单元格 display: table-cell
- overflow不为visible的元素 overflow: hidden
- 弹性盒子 display: flex
BFC影响范围
BFC包含创建该上下文元素的所有子元素，但不包括创建了新BFC的子元素的子元素。
<div id='div1' class='BFC'>
<div id='div2'>
<div id='div3'></div>
<div id='div4'></div>
</div>
<div id='div5' class='BFC'>
<div id='div6'></div>
<div id='div7'></div>
</div>
</div>
从以上代码可以看出，div1创建了一个BFC区域，div2,div3,div4,div5都受该BFC影响，都在该BFC区域内部。但是不包括div6和div7，因为这两个div是在由div1的创建了新的BFC的子元素div5的子元素，所以按照定义，div6和div7都只在div5所创建的新BFC中。这也恰恰说明了一个元素不能同时存在于两个BFC中。
BFC的作用和意义
- BFC最重要的作用是，让处于BFC内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。
- 每一个BFC中默认有一个常规流
- 处于同一个BFC中的元素互相影响
- 计算BFC高度时，浮动元素也要算进去
在实际中，利用BFC可以闭合浮动，防止与浮动元素重叠。同时，由于BFC的隔离作用，可以利用BFC包含一个元素，防止这个元素与BFC外的元素发生margin collapse。
