BFC是什么？
BFC全称叫做（Block Formatting Context）中文叫块格式化上下文，是一个网页的概念。一个BFC是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。
网页是一个一个盒子组成的，浏览器加载时是自上而下进行加载的，上下外边距会取最大值覆盖最小值，而左右排列的元素不会出现这个问题。BFC的存在意义就是为了解决这个问题。
BFC的使用方式
根元素或其它包含它的元素
浮动元素 (元素的 float 不是 none)
绝对定位元素 (元素具有 position 为 absolute 或 fixed)
内联块 (元素具有 display: inline-block)
表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
具有overflow 且值不是 visible 的块元素，
display: flow-root
column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。
一个块格式化上下文包括创建它的元素内部所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素。
