BFC(Block formatting context)直译为"块级格式化上下文"。它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干.接下来通过本文给大家介绍CSS理解块级格式上下文（BFC）的相关知识，感兴趣的朋友一起看看吧

BFC 的概念始于 CSS2，是个蛮古老的 CSS 话题了，网上也到处能搜到 BFC 的介绍，但是都不够简洁。本文系翻译自 Rachel Andrew 女士的博文Understanding CSS Layout And The Block Formatting Context ，内容足够简洁明了。 本文的目的是介绍一些概念，来帮你增强 CSS 码力。如标题所示，这篇文章主要是讲 块级格式上下文（BFC，Block Formatting Context） 。你可能没听过这个术语，但只要你曾经使用

1.BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box（块级元素）参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干. 通俗地来说：创建了 BFC的元素就是一个独立的盒子，里面的子元素不会在布局上 影响外面的元素（里面怎么布局都不会影响外部），BFC任然属于文档中的普通流 2.BFC的生成： 知道了BFC怎么触发BFC 满足以下条件之一都可以触发BF