关于由CSS2.1所提出的的BFC的理解与样例

　　今天在这里谈谈css中BFC。“BFC”是Block Formatting Context的缩写，这个概念是由CSS2.1提出来的，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。满足以下任何一条件，即可形成“BFC”。

1、float的值不为none。

2、overflow的值不为visible。

3、display的值为table-cell, table-caption, inline-block中的任何一个。

4、position的值不为relative和static。

　　“BFC”的作用可以通过解决以下三个问题得到很好的体现：

问题一：避免和浮动元素重叠。如果一个浮动元素后面跟着一个非浮动的元素，那么就会产生一个覆盖的现象，这时候我们可以通过以下方法解决，

　　　　eg:

　　<div style="float:left; border: 2px solid red"> 123</div>
　　<div style="border: 2px solid blue;overflow:hidden;">
　　　　qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq
　　　　qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq
　　　　qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq
　　　　qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq
　　　　qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq
　　</div>

　　注：蓝色背景处是解决问题的关键。而这就属于通过创建一个“BFC”来解决布局问题。

问题二：清除元素的内部浮动。只要把父元素设为BFC就可以清理子元素的浮动了。然而对于IE6，需要加上zoom:1。在这里就会引出另一个概念：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属性来获取。

问题三：嵌套元素的margin边距折叠。

　　　　   按照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生垂直Margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡(例如边框，非空　　　　内容，padding等)就会发生margin重叠。因此要解决margin重叠问题，只要让它们不在同一个BFC就行了，但是对于两个相邻元素来说，意义不大，没有必要给它　　　　们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠了。

　　以上就是我现在对“BFC”的认识。