学习BFC前首先了解一下Box、Formatting Context的概念

Box：CSS布局的基本单位。

Box是CSS布局的对象和基本单位，直观点来说，就是一个页面是由很多个Box组成的。

元素的类型和display属性，决定了这个Box的类型，不同类型的Box，会参与不同的Formatting Context（一个决定如何渲染文档的容器）

因此，Box内的元素会以不同的方式渲染。

有哪些盒子？ block-level box: display:block list-item table 参与：BFC inline-level box: display:inline inline-block inline-table 参与：IFC

Formatting Context

Formatting Context 是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素如何定位，以及和其他元素的关系和相互作用。 最常见的Formatting Context 有 BLock Formatting Context （简称BFC） Inline Formatting Context （简称IFC）

BFC

Block Formatting Context直译为“块级格式化上下文”，是一个独立的渲染区域，只有block-level box参与，它规定了内部的block-level box如何布局，并且与这个区域外部毫不相干。

简单的来说，BFC就是一个容器，管理块级元素

BFC布局规则：

1. 内部的Box会在垂直方向，一个接一个放着；
2. BFC的区域不会与float box区域重叠；（可以用来 两列布局 ）
3. 内部Box的垂直方向的距离由margin决定，属于同一个BFC的额两个相邻Box的margin会发生重叠；
4. 计算BFC的高度时，浮动元素也参与计算
5. BFC就是页面上的一个隔离的独立容器，在容器里面的子元素不会影响到外面的元素

BFC什么时候出现（那些元素会生成BFC？）

1. 根元素或包含根元素的元素 (html就是)
2. float属性不为none
3. 绝对定位元素（元素的 position 为 absolute 或 fixed）
4. 行内块元素（元素的 display 为 inline-block）
5. 表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
6. 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
7. 匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
8. overflow 值不为 visible 的块元素
9. display 值为 flow-root 的元素
10. contain 值为 layout、content或 strict 的元素
11. 弹性元素（display为 flex 或 inline-flex元素的直接子元素）
12. 网格元素（display为 grid 或 inline-grid 元素的直接子元素）
13. 多列容器（元素的 column-count 或 column-width 不为 auto，包括 ``column-count 为 1）
14. column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中