BFC（块级格式化上下文）

之前一直听说这个概念，使用的时候也一知半解，没有细细研究，今天又遇到了，来做下小结。

1、什么是BFC

是Box Formatting Context（块级格式化上下文）的缩写，这里我们需要拆分为Box、Formatting Context；其中，

 

Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 GFC 和 FFC。

 

Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子：

block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context；

inline-level box:display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context；

run-in box: css3 中才有， 这儿先不讲了。