BFC概念相关内容

Formatting context是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

BFC有以下特性：

1 内部的Box会在垂直方向，从顶部开始一个接一个地放置。

2 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加

3 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如

   此。

4 BFC的区域不会与float box叠加。

5 BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。

6 计算BFC的高度时，浮动元素也参与计算。

 

那么我们该怎么使用BFC呢，如何触发BFC呢？

1 float 除了none以外的值

2 overflow 除了visible 以外的值（hidden，auto，scroll ）

3 display (table-cell，table-caption，inline-block, flex, inline-flex)

4 position值为（absolute，fixed）

 

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。

参考网址：http://www.w3.org/TR/CSS2/visuren.html#block-formatting