BFC（Block Formatting Context）
BFC是什么
BFC（Block Formatting Context）直译为“块级格式化范围”，是W3C CSS 2.1规范中的一个概念，它决定了元素如何对齐内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。可以把它理解成是一个独立的容器，并且这个容器里box的布局，与这个容器外的毫不相干。
在一些情况场景下，可能会遇到一些元素需要脱离文档流，但是不影响其他元素的布局，这时候可以使用在脱离文档流的元素外面套一层BFC。
如何产生BFC
- 根元素，即 html
- float 的值不为none（默认）
- overflow 的值不为 visible（默认）
- display 的值为 inline-block、table-cell、table-caption
- position 的值为 absolute 或 fixed
BFC的特性
1)块级格式化上下文会阻止外边距叠加
当两个相邻的块框在同一个块级格式化上下文中时，它们之间垂直方向的外边距会发生叠加。换句话说，如果这两个相邻的块框不属于同一个块级格式化上下文，那么它们的外边距就不会叠加。
2)块级格式化上下文不会重叠浮动元素
根据规定，一个块级格式化上下文的边框不能和它里面的元素的外边距重叠。这就意味着浏览器将会给块级格式化上下文创建隐式的外边距来阻止它和浮动元素的外边距叠加。由于这个原因，当给一个挨着浮动的块级格式化上下文添加负的外边距时将会不起作用
3)块级格式化上下文通常可以包含浮动
详见： W3C CSS2.1 - 10.6.7 'Auto' heights for block formatting context roots
BFC与消除浮动
虽然在一些情境下，使用BFC和消除浮动的效果一样，但是二者并不等同。这一点在一些博客中鲜有区分，有兴趣的可以看一下参考博客中的第三和第四篇文章，相信对于浮动你会有更加深入的了解。