1.背景介绍
BFC全称是Block fomatting context，直译为”块级格式化上下文”。我们来拆分理解一 下，首先了解Block；Box是盒子模型,是CSS布局中的基本单位，BOX有几种类型我们大概了解一下；
-
块盒block box： block box块盒有以下特性：
- 当元素的CSS属性display为block，list-item或 table时，它是块级元素 block-level；
- 视觉上呈现为块，竖直排列；
- 块级盒参与块格式化上下文；
-
行内盒inline box:
- 当元素的CSS属性display为inline，inline-block或inline-table时，称它为行内级元素；
- 视觉上它将内容与其它行内级元素排列为多行；典型的如段落内容，有文本(可以有多种格式譬如着重)，或图片， 都是行内级元素；
- 行内级元素生成行内级盒(inline-level boxes)，参与行内格式化上下文(inline formatting context)。 同时参与生成行内格式化上下文的行内级盒称为行内盒(inline boxes)。所有display:inline的非替换元素生成的 盒是行内盒；
Formatting context是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系、相互作用。CSS2.1 中只有BFC、IFC（行级格式化上下文），CSS3中还增加了GFC（网格布局格式化上下文）和FFC（自适应格式化上下文）。
2.知识剖析
BFC定义：
BFC是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并 且与这个区域外部毫不相干。BFC可以被理解为一种容器，一种被隔离起来了的独立容器，容器里面的元素不会在布局上 影响到外面的元素，并且 BFC具有普通容器没有的一些特性，例如可以包含浮动元素等等；
BFC的布局规则：
- 内部的盒会在垂直方向一个接一个排列（可以看作BFC中有一个常规流）；
- BFC的区域不会与float的元素区域重叠
- 计算BFC的高度时，浮动子元素也参与计算
- 每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。
- 垂直方向上的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠，与方向无关。
- BFC是一个隔离的独立容器，容器里面的子元素不会影响到外面元素 上面罗列的一条条特性可能有点抽象，但是我们可以结合之前学习CSS中的特性对它们来加以理解；比如：CSS中块级 元素会垂直排列；浮动元素会尽量接近往左或右上方；竖直方向的两个元素的margin会重叠、 等等。
3.常见问题
BFC在什么情况下会发生，或者说BFC有什么触发条件？
BFC有什么实际的作用？
4.解决方案
1.BFC有什么触发条件？
-
在CSS2.1中规定，满足下列CSS声明之一的元素便会生成BFC
- 根元素
- float的值不为none
- overflow的值不为visible
- display的值为inline-block、table-cell、table-caption
- position的值为absolute或fixed
2.BFC有什么实际的作用？
-
实际用途
- 防止margin重叠（塌陷）
- 可以包含浮动元素——清除内部浮动
- 防止与浮动元素重叠——自适应两栏布局
5.编码实战
6.扩展思考
haslayout
谈到BFC就有很多人引申到haslayout，那么haslayout又是什么呢，它和BFC有什么关系，或者说有什么共同点呢？
haslayout是IE7-浏览器的特有属性。Layout是IE浏览器渲染引擎的一个内部组成部分。渲染引擎采用了’hasLayout’属 性，属性值可以为true或者flase，当一个元素的hasLayout为true时，我们就说这个元素有一个布局（Layout），或者 拥有布局，这个时候就不用依赖其包含块了而是靠自身内容。
-
默认触发hasLayout的HTML标签：
- 根元素
- html,body
- table,tr,th,td
- img
- input,button,select,textarea,fieldset
-
可以触发hasLayout的CSS属性：
- display:inline-block
- height/width:除了auto
- float:left/right
- position:absolute
- zoom(IE专有属性，设置或检索对象的缩放比例):除了normal
与BFC的共同点
1.可以实现不和浮动元素重叠
2.可以清除元素内部浮动
3.能解决嵌套元素边距折叠的问题
7.参考文献
参考资料：http://www.cnblogs.com/elcarim5efil/p/4745796.html
——学习块格式化上下文（BlockFormattingContext）
参考资料：http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html
——前端精选文摘：BFC 神奇背后的原理
参考资料：http://www.cnblogs.com/ILYljhl/p/3169419.html
——BFC与hasLayout之间的故事
8.更多讨论
由BFC引发的关于position的思考？
BFC 与 hasLayout 的比较？
9.互动提问
1.使用overflow触发BFC有什么好处？
答：overflow相比于position,display，float等的好处就是不会破坏其原有的结构，不会影响其原有的布局而且代码简洁使用起来非常方便。
2.同一个 BFC 的下上下外边距还是会发生重叠，应该怎么办？
答：想要避免外边距的重叠，可以将它们放在不同的 BFC 容器中。
3.BFC与hasLayout有什么共同点？
答：1.最主要的就是hasLayout只能被IE所触发，是IE专有的属性2.hasLayout的元素被限制为一个矩形；3.hasLayout的元素设置display:inline后与inline-block行为类似。