CSS布局中应用BFC的例子

BFC是啥？

BFC(Block Formatting Context)，“块状格式化上下文”。简单地说，它提供一个独立的布局环境。在同一个BFC中，盒子会一个挨一个地排列，margin边距还会在垂直方向上叠加。float和clear:float也只会在同一个BFC内有效。

产生BFC的情况有？

W3C标准中这样描述：

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

非块级盒子的浮动元素、绝对定位元素及块级容器(比如inline-blocks，table-cells和table-captions)，以及overflow属性是visible之外任意值的块级盒子，都会创建了一个BFC。即当元素CSS属性设置了下列之一时，即可创建一个BFC:

float：left|right

position：absolute|fixed

display: table-cell|table-caption|inline-block

overflow: hidden|scroll|auto

举个例子！

html：

这儿是你的照片

爱饭否，爱豆瓣，也爱鸡脱壳。
爱爬山，爱拍美景。
爱腐败，更爱远征的自虐。
爱下雪天，爱感动，爱平底鞋。
我没有什么特别，我很特别。
我和别人不一样，我和你一样。
我是前端。

css:

#pic{ width: 70px;height: 70px; background-color: #8694ff;color: #ffffff;}

#content{color: blue;}

效果是这样的：



我们想要文字在图片的右侧，会想到用float.改一下CSS：

#pic{ width: 70px;height: 70px; background-color: #8694ff;color: #ffffff;float：left}

得到的效果是这样的：



我们想要的是文字整齐的排列而不是将图片包围起来，试着给文字内容加上：overflow:hidden.

#content{color: blue;overflow:hidden}

结果在下面：



这看起来是正确的效果了！

这个效果在Chrom和FireFox以及IE7以上都可以实现。但是在IE6下不可以，IE浏览器有HasLayout这个属性，当它为true时，才可以呈现上面的现象。但是这个属性是不能直接设置的。要么默认拥有，要么通过特定的属性来获取，

直接的使元素hasLayout属性值为true的方法是声明下面的CSS属性之一：

width: 除auto之外的值

height: 除auto之外的值

float: left|right

position: absolute

display: inline-block

writing-mode: tb-rl(IE)

zoom: 除normal之外的值

ZOOM也是IE特有的属性，我们可以这样设置：

#content{color: blue;overflow:hidden；zoom：1}

就能在IE6兼容了.