概念
BFC（block formatting context），块级格式化上下文。是一种css盒模型的渲染规则。
先了解视觉格式化模型这个概念。
BFC渲染规则
- 规则1: 创建了BFC的元素中,在垂直方向上的margin会发生重叠。根元素就是一个BFC元素 (这个可以解释margin重叠)
- 规则2: BFC元素在页面上是一个独立的容器,外面的元素和里面的元素互不影响。
- 规则3: BFC元素不会和浮动的元素重叠。(这个可以解释两栏自适应)
- 规则4: 计算BFC元素的高度时,里面浮动元素的高度也会参与计算 (用来解释overflow:hidden可以清除浮动)
普通元素如何创建BFC
- 根元素或其它包含它的元素
- 浮动 (float不为none的都可以)
- 绝对定位的元素 (元素具有 position 为 absolute 或 fixed)
- 内联块 inline-blocks (元素具有 display: inline-block)
- 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
- 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
- 块元素具有overflow ，overflow: hidden / auto
- display:flow-root
最常用的是：overflow : hidden
block-level boxes、containing block、block formatting context
下面的解释和一些形象的描述来自知乎
block-level boxes：块级盒子
一个 block-level element (‘display’ 属性值为 ‘block’, ‘list-item’ 或是 ‘table’) 会生成一个 block-level box，这样的盒子会参与到 block-formatting context (一种布局的方式) 中。
containing block：包含块
在这种布局方式下，盒子们自所在的 containing block 顶部起一个接一个垂直排列，水平方向上撑满整个宽度 (除非内部的盒子自己内部建立了新的 BFC)。
block formatting context：块级格式化上下文
一般来说，盒子本身就为其子孙建立了 containing block，用来计算内部盒子的位置、大小，而对内部的盒子，具体采用哪个 containing block 来计算，需要分情况来讨论：
- 根元素所在的 containing block 被称为 initial containing block，在我们常用的浏览器环境下，指的是原点与 canvas 重合，大小和 viewport 相同的矩形；
- 对于 position 为 static 或 relative 的元素，其 containing block 为祖先元素中最近的 block container box 的 content box (除 margin, border, padding 外的区域)；
- 对于 position:fixed 的元素，其 containing block 由 viewport 建立；
- 对于 position:absolute 的元素，则是先找到其祖先元素中最近的 position 属性非 static 的元素，然后判断：
(1).若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形；
(2).否则则由这个祖先元素的 padding box 构成。
如果都找不到，则为 initial containing block。
想想浏览器怎么把一个元素“画”出来，至少要知道定位和尺寸。定位有三种normal flow, floats和absolute，无论属于哪种首先要找所在的containing block(包含块)，相当于一个大箱子里摆很多小盒子，小盒子怎么摆取决于大箱子。
怎么确定一个元素的containing block，由position属性确定：
- static(默认的)/relative：简单说就是它的父元素的内容框（即去掉padding的部分）
- absolute: 向上找最近的定位为absolute/relative的元素
- fixed: 它的containing block一律为根元素(html/body)，根元素也是initial containing block block
formatting context(块级格式化上下文)是一种布局特性，还是往箱子里放东西，bfc可以理解为打了"隔板"把一组小盒子分离开。
“block-level box一定会产生block formatting context”是错误的，block-level box须通过设置如overflow不为visible(IE6/7无效，可以设zoom)、float不为none等等来创建block formatting context。
触发了bfc的block level box，没有margin callapse的问题，并且边缘不会和float box的边缘重叠，利用它可以清浮动。
页面上任何一个元素都可以看成box，box分block-level，inline-level和匿名的。