BFC (Block formatting context)

一：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：解决层内浮动溢出问题，

.实例