BFC简单介绍

W3C关于BFC的一个解释:

 

Block Formatting Context（块格式化上下文）是W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其余元素的关系和相互做用。

在建立了 Block Formatting Context 的元素中，其子元素会一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻的元素之间的垂直距离取决于 ‘margin’ 特性。在 Block Formatting Context 中相邻的块级元素的垂直边距会折叠（collapse）。

在 Block Formatting Context 中，每个元素左外边与包含块的左边相接触（对于从右到左的格式化，右外边接触右边）， 即便存在浮动也是如此（尽管一个元素的内容区域会因为浮动而压缩），除非这个元素也建立了一个新的 Block Formatting Context 。

看起来比较蛋疼是吧，另外一个通俗点的解释是：在普通流中的 Box(框) 属于一种 formatting context(格式化上下文) ，类型能够是 block ，或者是 inline ，但不能同时属于这二者。而且， Block boxes(块框) 在 block formatting context(块格式化上下文) 里格式化， Inline boxes(块内框) 则在 inline formatting context(行内格式化上下文) 里格式化。任何被渲染的元素都属于一个 box ，而且不是 block ，就是 inline 。即便是未被任何元素包裹的文本，根据不一样的状况，也会属于匿名的 block boxes 或者 inline boxes。因此上面的描述，便是把全部的元素划分到对应的 formatting context 里。

那BFC究竟是啥？就是一个做用范围。能够把它理解成是一个独立的容器，而且这个容器的里box的布局，与这个容器外的绝不相干。

简单地说：Block Formatting Context就是页面上的一个隔离的独立容器，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此。

看看BFC的触发条件

• float不为none
• overflow不为visible (IE6无效)
• “display”的值是”table-cell”,”table-caption”,或”inline-block”
• “position”的值既不是”static”也不是”relative”
• IE的hasLayout会触发一个新的block formatting context

而BFC的特性是

• 不存在collapsing margins问题
• 边缘不会和float box重叠

 

第一个margin不会叠加的特性，能够理解为两个处于普通流的盒子，会有margin叠加的问题，是由于他们属于相同的BFC，当他自身建立了一个新的BFC时，这个问题就不存在了

第二个特性就特别有用了，由于元素触发了BFC的话，就不会被float元素覆盖，当子元素所有浮动的时候也可以正确地包含了

可是在 IE6 IE7 IE8(Q) 中没有触发 hasLayout 并在其余浏览器中建立了 Block Formatting Context 的元素的表现会有差别。具体能够参考w3help

保险的解决方案就是既触发IE的hasLayout,又触发BFC，具体的css就是既overflow:hidden，又zoom:1(虽然zoom并不能经过校验)，另外overflow还有一个问题就是会影响盒子的表现

相对于常常要限宽，还有一大堆BUG的float来布局，用BFC来布局会至关方便