1. 什么是BFC?
Block Fromatting Context， 即块级格式上下文。
W3C对BFC的定义如下： 浮动元素和绝对定位元素，非块级盒子的块级容器，以及overflow值不为"visiable"的块级盒子，都会为他们的内容创建新的 BFC。
2. BFC的触发条件
一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可：
1. 根元素；
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为 flex 或 inline-flex元素的直接子元素；
10. 网格元素。display为 grid 或 inline-grid 元素的直接子元素。