什么是BFC？如何生成一个BFC？BFC有什么作用？
一：什么是BFC？
首先了解CSS中两个概念：box和formatting context。
Box：CSS布局中的基本单位。一个页面由多个box组成，元素的类型和display的属性决定了这个box的类型，不同类型的box会参与不同的formatting context，box内的元素会以不同的方式进行渲染。主要的box类型有以下两种：
1.块级元素block-leave block：它的display属性为block, list-item, table，参与block formatting context；
2.行级元素inline-level box：它的display属性为inline, inline-block, inline-table，参与inline formatting context。
formatting context：W3C CSS2.1规范中的概念。它是页面中的一块渲染区域，有一套渲染规则，它决定其子元素如何定位、和其他元素之间的关系与相互作用。常见的formatting context有BFC（Block formatting context）和IFC（Inline formatting context）。
BFC全称是“Block Formatting Context”，中文直译“块级格式化上下文”。它是一个独立的渲染区域(formatting context)。只有block-level box参与，它规定内部的block-level box如何布局，并且与这个区域外部毫不相干。
BFC布局规则：
- 内部的box会在垂直方向一个接一个的放置
- box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠
- 每个元素margin box的左边，与包含块border box的左边相接触（对于从左向右的格式化，否则相反），即使存在浮动也是如此；
- BFC区域不会与float元素重叠
- BFC是页面上的一个隔离的独立容器，容器内的子元素不会影响到外面的元素
- 计算BFC高度时，浮动元素也参与计算
如何生成BFC：
- 根元素
- float属性不为none
- position为absolute或者fixed
- dispaly为inline-block,table-cell, table-caption, flex, inline-flex
- overflow不为visible
有何作用：
1.自适应两栏布局
2.清除浮动
3.防止垂直margin重叠（外边距合并）
4.防止父子边距合并（外边距塌陷）