今天在这里谈谈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”的认识。