被问到 BFC 了，讲真，我有时候怀疑自己是不是前端，以前没有注意到这类问题。现在都是组件化开发，平时我自己用到的都是基本的 flex 一把梭，平时页面可能也对细节要求不低，但是讲真，确实没有注意到 BFC，难道是我是写功能太多，切页面太少的缘故？还是说现在浏览器越来越新，我们不需要再考虑这样的问题了？类似于 js 的 var 和 let？
既然碰到了那就学习一下吧。
文档与教程
MDN 的标准文档，读起来可能艰涩一些，可以看一下其他的文章教程后再回过头来看这个文档：
优秀教程文章，可以看了这三篇文章再去看官方文档：
个人理解
先引用一下 MDN 文档，毕竟是标准，当然直接这么看你可能还是有点楞逼，不知道 BFC 是干嘛的？反正我是楞逼的
块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视 CSS 渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
下列方式会创建块格式化上下文：
- 根元素（）
- 浮动元素（元素的 float 不是 none）
- 绝对定位元素（元素的 position 为 absolute 或 fixed）
- 行内块元素（元素的 display 为 inline-block）
- 表格单元格（元素的 display 为 table-cell，HTML 表格单元格默认为该值）
- 表格标题（元素的 display 为 table-caption，HTML 表格标题默认为该值）
- 匿名表格单元格元素（元素的 display 为 table、table-row、table-row-group、table-header-group、table-footer-group（分别是 HTML table、row、tbody、thead、tfoot 的默认属性）或 inline-table）
- overflow 计算值 (Computed) 不为 visible 的块元素
- display 值为 flow-root 的元素
- contain 值为 layout、content 或 paint 的元素
- 弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
- 网格元素（display 为 grid 或 inline-grid 元素的直接子元素）
- 多列容器（元素的 column-count 或 column-width (en-US) 不为 auto，包括 column-count 为 1）
- column-span 为 all 的元素始终会创建一个新的 BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。
- 块格式化上下文包含创建它的元素内部的所有内容.
是不是有点楞逼，还是不知道 BFC 是干嘛的？还是直接上代码比较直观一些，代码和总结都是我从上面 3 个文章抄过来的
阻止元素被浮动元素覆盖
一个正常文档流的 block 元素可能被一个 float 元素覆盖，挤占正常文档流，因此可以设置一个元素的 float、display、position 值等方式触发 BFC，以阻止被浮动盒子覆盖。
使用 BFC 包含浮动元素
通过改变包含浮动子元素的父盒子的属性值，触发 BFC，以此来包含子元素的浮动盒子。
使用 BFC 阻止 margin 合并
属于同一个 BFC 的两个相邻块级子元素的上下 margin 会发生重叠，(设置 writing-mode:tb-rl 时，水平 margin 会发生重叠)。所以当两个相邻块级子元素分属于不同的 BFC 时可以阻止 margin 重叠。 这里给任一个相邻块级盒子的外面包一个 div，通过改变此 div 的属性使两个原盒子分属于两个不同的 BFC，以此来阻止 margin 重叠。
后记
其实还有更多的细节和技巧，~~但是时间有限~~~，就不再深入的去研究了，需要的时候再用，多学一点是一点。
比较好奇的是哪种类型厂子面试官会问到这种题？我猜用 IE 比较多的或者对切页面要求高的大概会问到。
问问你身边的朋友，知道 BFC 吗？