首页 > 代码库 > BFC
BFC
应该是 Block Formatting Context信息来源网络，希望能帮到你啥是Block Formatting Context当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。为了让我们有个感性的认识，举个不太合适的例子。你可以把一个页面想象成大的集装箱，这个集装箱里装的货物就是HTML元素。在现实生活中为了避免不同人的货物相互混淆，都是把货物打好包装再装入集装箱，这样的话无论你包装里面的货物怎么摆放，都不会影响到其他人的货物。那么这个包装就可以被想象成Block Formatting Context。怎样才能形成Block Formatting Context当一个HTML元素满足下面条件的任何一点，都可以产生Block Formatting Contextfloat的值不为none。overflow的值不为visible。display的值为table-cell, table-caption, inline-block中的任何一个。position的值不为relative和static。
BFC(Block Formatting Context)，简单讲，它是提供了一个独立布局的环境，每个BFC都遵守同一套布局规则。例如，在同一个BFC内，盒子会一个挨着一个的排，相邻盒子的间距是由margin决定且垂直方向的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
BFC的一个简单应用 一个简单的例子： HTML
- <div class=”item”>
- <div class=”pic”>your photo here?</div>
- <p class=”cont”>
- 爱饭否，爱豆瓣，也爱鸡脱壳。
- 爱爬山，爱拍美景。
- 爱腐败，更爱远征的自虐。
- 爱下雪天，爱感动，爱平底鞋。
- 我没有什么特别，我很特别。
- 我和别人不一样，我和你一样。
- 我是前端。
- </p>
- </div>
CSS
- .item{width:300px;border:1px solid #b2d1a3;background-color:#e5ebe4;}
- .pic{width:80px;height:80px;margin:10px;
- font-family:”Segoe UI Light”;color:#fff;background-color:#acdae5;}
- .cont{margin:10px;color:#37a;}
这段代码是结构简单的三个元素的叠放，效果如下：
211.png (7.31 KB, 下载次数: 4)
下载附件 保存到图库
这时，如果要将文字部分放到图片的右侧，很多人都会想到给.pic使用float:
CSS
- <font style="<blockquote>.pic{width:80px;height:80px;margin:10px;
将得到这样的效果：
221.png (7.02 KB, 下载次数: 7)
下载附件 保存到图库
右侧内容并没有如我们预料一样规整的排在右侧，而是将左侧图片包围起来。接下来，我们为右侧内容部分设置overflow:hidden 属性来使它形成一个新的BFC：
CSS
- .cont{margin:10px;color:#37a;overflow:hidden;}
这次将看到：
23.ie62.png (6.78 KB, 下载次数: 4)
下载附件 保存到图库
这确实是我们想要的。可是，在IE6下看到的却是下面这样：
23.ie6_.png (6.53 KB, 下载次数: 4)
下载附件 保存到图库
不仅内容区没有排在右侧，而且遭遇了双边距bug。双边距bug非本文重点讨论，直接为.pic增加display:inline来解决。我们关心的是为什么IE6下右侧内容元素还是不能决定自己的布局呢？这里涉及到了另一个概念HasLayout。其实，在完美世界的字典里，是没有HasLayout这个概念的。它是IE浏览器引擎内部特有的属性，它可以影响到元素的定位和元素之间的相互作用。当一个元素的HasLayout属性为true时，这个元素才可以决定自己和其子孙元素的布局。为数不多的元素默认这个属性值为true，包括：
- body and html
- table, tr, th, td
- img
- hr
- input, button, file, select, textarea, fieldset
- marquee
- frameset, frame, iframe
- objects, applets, embed
所以，当发现有些元素的布局在IE下有异常时，可以有充分的理由来怀疑可能是hasLayout属性为false。而且这个属性值不能直接设置。一个元素要么默认拥有，要么通过设置特定的CSS属性来获取。直接的使元素hasLayout属性值为true的方法是声明下面的CSS属性之一：
- width: 除auto之外的值
- height: 除auto之外的值
- float: left|right
- position: absolute
- display: inline-block
- writing-mode: tb-rl(IE)
- zoom: 除normal之外的值
IE7中增加了一些同样效果的属性：
- min-height: 任意值
- max-height: 除 “none” 之外的任意值
- min-width: 任意值
- max-width: 除 “none” 之外的任意值
- overflow: hidden|scroll|auto
- overflow-x: hidden|scroll|auto
- overflow-y: hidden|scroll|auto
- position: fixed
最常用的是zoom:1，因为这个设置对元素外观不会造成任何影响。但是这个属性是IE特有的CSS属性，不会通过CSS检查器W3C提供的CSS校验器（当然，让不让通过校验实际取决于各种校验器的规则）。所以，有推荐对于IE7，最好是设置min-height:0。因为0是min-height的初始值，这样不会对元素外观造成影响。对于IE6及更早的版本，推荐方法是设置height:1%。这个高度会使得容器盒子的大小刚好包含内容区而忽略掉真正的属性值。但这个设置的缺陷是会影响到其他浏览器的解析，因此需要使用hack屏蔽掉对其他浏览器的影响。
所以，最终的代码可能是：
- .item{width:300px;border:1px solid #b2d1a3;background-color:#e5ebe4;}
- .pic{width:80px;height:80px;margin:10px;
- font-family:”Segoe UI Light”;color:#fff;background-color:#acdae5;
- float:left;display:inline;}
- .cont{margin:10px;color:#37a;overflow:hidden;_height:1%;}
BFC