BFC其实没有那么神秘，BFC只是一个独立的布局环境，理解BFC对我们日常的布局设计上有着重要的帮助，并且BFC和Margin Collapse之间有着重要关联。另外文中还提到了clear float时候所产生'clearance'的计算。希望大家有所收获。

BFC(Block Formatting Context)是Web页面中盒模型布局的CSS渲染模式。它的定位体系属于常规文档流。摘自W3C：浮动，绝对定位元素，inline-blocks, table-cells, table-captions,和overflow的值不为visible的元素，（除了这个值已经被传到了视口的时候）将创建一个新的块级格式化上下文。上面的引述几乎总结了一个BFC是怎样形成的。但是让我们以另一种方式来重新定义以便能更好的去理解。

CSS布局中有一些概念，一旦理解了这些概念，就能真正的提高你的CSS能力。这篇文章主要介绍的是关于块格式化上下文（Block Formatting Context），也就是大家俗称的BFC。你可能从未听说过这个术语，但只要你曾经使用过CSS布局，你就可能知道它是什么。理解BFC是什么，它有什么功能，以及如何创建一个BFC是非常有用的，这些能帮助你更好的理解CSS布局。在这篇文章中，我将会通过几个很熟悉的示例来解释BFC。我还会介绍一个新的display的值，当你理解了BFC是什么的时候，你才能了解为什么需要这个值。也就能更好的理解它的真正意义。

最近在纠结程序语言和设计语言中的一些概念，整到层叠上下文和图层相关的事情，然后发现自己对于CSS中的层叠相关的知识并没有自己想象中那样理解的透彻。因此花了一段时间重新梳理了一下相关的知识。如果想要理解清楚CSS中的层叠相关的知识点，我们就很有必要先了解一些重要的概念：文档流（Normal Flow）、格式化上下文（Formatting Context）、层叠上下文（Stacking Context）、层叠水平（Stacking Level） 和 层叠顺序（Stacking Order）。