刷面试题的时候，看到BFC 完全懵逼了，第一次接触这个概念。用了css 也有半年了，美化了那么多页面，搜索了一下，原来我们已经用它解决过好多问题了，原来他也是有专业的名字的。
概念：块级格式化上下文：block formatting context 的定义
（W3C CSS 2.1 规范中的一个概念,它是一个独立容器，决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。）
一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型。
不同类型的 Box,会参与不同的 Formatting Context（决定如何渲染文档的容器）,因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响。（来源菜鸟教程）
Box、Formatting Context的概念。
-
Box: CSS布局的基本单位
Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子：
- block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context；
- inline-level box:display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context；
-
Formatting context
Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。
CSS2.1 中只有BFC和IFC, CSS3中还增加了GFC和FFC。
一、BFC的布局规则
- 内部的盒子会在垂直方向，一个一个地放置
- BFC是页面上的一个隔离的独立容器
- 属于同一个BFC的两个相邻Box的上下margin会发生重叠
- 计算BFC的高度时，浮动元素也要参与计算
- 每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此
- BFC的区域不会与float重叠
二、哪些元素会生成BFC
- 根元素或包含根元素的元素，即body根元素。
- 浮动元素，即float属性值不为none（元素的position为absolute或fixed）。
- 行内块元素（元素的display为inline-block）。
- 表格单元格（元素的display为table-cell，HTML表格单元格默认为该值）。
- 表格标题（元素的display为table-caption，HTML表格标题默认为该值）。
- 匿名表格单元格元素(或者元素的display为table、table-row、table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或inline-table)。
- overflow的值不为visible的元素。
- display值为flow-root`的元素。
- contain值为layout、content或strict`的元素。
- 弹性元素(display为flex或inline-flex元素的直接子元素)。
- 网格元素(display为grid或inline-grid元素的直接子元素)。
- 多列容器（元素的colunm-count或column-width不为auto，包括column-count为1）。
- column-span为all的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器当中。
三、 BFC的作用和原理
- 自适应2栏布局
- 清除内部浮动
- 防止垂直 margin 重叠
