简介
BFC的全称是 Block formatting contexts(块级格式化上下文)。block：块级元素，formatting：格式化、规定…的格式，contexts：环境。翻译过来就是：BFC是规定内部块级元素格式(摆放规则)的一个独立的环境。
IFC（inline...）
BFC其实包含三层要素。
1摆放规则约束的对象是内部的所有块级元素
2.这个规则是：一个块级元素占据一整行空间，一个挨一个从上到下排列，盒子间的垂直距离由margin决定。相邻块级盒子的垂直margin会出现折叠。BFC里的盒子左侧边缘不会超出BFC，除非这个盒子自己也变成了一个新的BFC。
3.“上下文”一般理解为：1.一个由容器和子项参与构建的、遵循一定规则的、独立的环境；2.同一上 下文中的子项关系是平等的，能相互影响的，即使存在子项嵌套子项的情况；3. 子项可能创建新的 上下文，对其潜逃的子项生效，与外层上下文有同样的规则，且新上下文中的子项与外层上下文的子 项完全隔离。
怎么产生
html 根节点默认会创建一个BFC，在这个环境下的块级元素会遵循上述规则摆放。给元素添加浮动、绝对定位、display:inline-block、overflow不为visible、display: flow-root 这些
样式时会让元素创建新的BFC。
创建BFC就像给元素加了一层隔离带一样。对内，内部的块级元素仍然准守一样的摆放规则但无法超出
自己所属的BFC容器。对外，这个创建了BFC的元素包括其所有的子元素被当成一个唯一独立的个体对
待。
基于BFC这种“隔离带”的特性用途
1） 用来实现清除浮动。比如元素内有浮动子元素导致高度塌陷，给这个元素添加overflow：hidden可以实现包裹浮动子元素。（因为创建了BFC，不允许孩子超出自己的边界）
2） 阻止父子元素外边距折疊。父子块级元素如果没设置边框和padding，外边距会产生折叠。给父元素 添加 overflow: hidden后会阻止父子元素外边距折疊。或为元素包裹一个盒子形成一个完全独立的空间，做到里面元素不受外面布局影响
