BFC的理解
BFC是块级格式化上下文。它是一个独立的渲染区域，只有Block-level box（块元素）参与，它规定了内部的Block-level
box如何布局，并且与这个区域外部毫不相关。
可以理解为：创建了 BFC的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素（无论如何都不会影响），BFC仍属于文档中的普通流
特形：
① 内部的块级元素会在垂直方向上一个接一个的放置；
② 位于同一BFC下的相邻块级子元素在垂直方向上会发生margin重叠；
③ 位于不同BFC下的相邻元素之间不会发生margin重叠；
④ BFC可以包含浮动元素；
⑤ BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；
创建：
① <html>根元素；
② float的值不为none
③ overflow的值为auto、scroll或hidden
④ display的值为:table-cell：它会作为一个表格单元格显示（类似td和th）table-caption：此元素会作为一个表格标题显示。inline-block：行内块元素。
⑤ position的值为fixed或absolute
用途：
① 闭合浮动；
② 阻止margin重叠
③ 自适应流体布局