一：BFC 是什么
MDN解释：
A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with each other，一个块级格式化上下文[BFC]是可视化CSS渲染网页的一部分，它是一个区域，块级布局，相互浮动在这个区域发生。个人翻译参考百度翻译
A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.一个BFC块区域包含所有里面的元素，除子元素创建了新的BFC。（因为各个BFC是一个独立的区域，BFC之间相互不影响）
所以：由于html(根元素)是独立的BFC，在里面的浮动，块级布局等才会相互影响，若新创建BFC,则相邻BFC之间的浮动元素，或是其他元素将不会影响。如,相邻两个块级元素的外边距折叠的情况将不会发生。
二：如何触发BFC
- position为absolute 或者fixed （总结为 脱离文档流）
- float不为none（也是要脱离文档流）
- the root element or something that contains it(根元素可产生独立BFC)
- display值为：inline-block,table-cell,table-caption,flex,inline-flex(flex和inline-flex是css3的特性)
- overflow:不为visible的任何其他值
- fieldset元素
三：BFC的作用
-
BFC就是一种布局方式，在这种布局方式下，内部盒子们自所在的 containing block 顶部起一个接一个垂直排列，水平方向上撑满整个宽度 (除非内部的盒子自己内部建立了新的 BFC)。 developer center上面有对BFC的一段描述：
一个 block formatting context 是web页面可视化CSS渲染的一个部分，是一块 block boxes 排布以及 float 元素相互作用的区域。可以理解为一个作用范围，在一个BFC里的布局与其之外的布局不相关或者说不相互影响
- 延伸作用1：两个独立的BFC之间不会折叠
- 延伸作用2：BFC可以包裹浮动元素，清除浮动的另一种方法。
- 延伸作用3：解决层内浮动溢出问题，
.实例
chrome浏览器效果：
如图：浮动元素溢出，为content元素创建独立BFC包含浮动元素，可解决浮动溢出
- 延伸作用4 : 可以阻止元素被浮动元素覆盖
参考：http://www.cnblogs.com/youxin/p/3345120.html，
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context