什么是BFC？

本文总结自饥人谷―方方老师：CSS深入浅出

什么是BFC？为什么这个概念一直被提起？？为什么每一个人都解释不清BFC？？？

BFC 全称为块格式化上下文 (Block Formatting Context) 。

从这个概念里你能看出来什么吗？

这个名字给我们的信息只有 “块” “格式化” “上下文” 。我们大概可以了解到这个东西是对上下文起作用的。
那里的上下文？？ HTML文档！
它大概的作用，貌似是格式化上下文？？可能不是我们通常意义中的格式化。

我们没有从这个名字中得到太多有用的信息，仅仅知道它是一种功能，针对于 HTML文档起作用。

那我们去看看官方是怎么解释的。

MDN：

一个块格式化上下文（block formatting context）是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。
一个块格式化上下文由以下之一创建：

根元素或其它包含它的元素

浮动元素 (元素的 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 的元素并不被包裹在一个多列容器中。

一个块格式化上下文包括创建它的元素内部所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素。

块格式化上下文对于定位 (参见 float) 与清除浮动 (参见 clear) 很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。浮动不会影响其它块格式化上下文中元素的布局，并且清除浮动只能清除同一块格式化上下文中在它前面的元素的浮动。