BFC：块格式化上下文（block formatting context）
它提供了一个独立布局的环境，每个BFC都遵守同一套布局规则。
w3c规范中的BFC定义：
http://www.w3.org/TR/CSS2/visuren.html#block-formatting
浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。
在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。
在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。
BFC的通俗理解：
首先BFC是一个名词，是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界的影响的。
转换为BFC的理解则是：
BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）
并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
触发 BFC 的条件如下：
浮动元素，float 除 none 以外的值
绝对定位元素，position（absolute，fixed）
display 为以下其中之一的值 inline-blocks，table-cells，table-captions
overflow 除了 visible 以外的值（hidden，auto，scroll）
弹性盒 flex boxes (元素 display: flex 或 inline-flex)
触发BFC的作用：
BFC 会阻止外边距折叠
BFC 可以包含浮动的元素
BFC 可以阻止元素被浮动元素覆盖
hasLayout：
‘Layout’ 是 IE 的专有概念，它决定了元素如何对其内容进行定位和尺寸计算，与其他元素的关系和相互作用，以及对应用还有使用者的影响。
概念说明：
‘Layout’ 可以被某些 CSS property（特性）不可逆的触发，而某些 HTML 元素本身就具有 layout 。
‘Layout’ 在 IE 中可以通过 hasLayout 属性来判断一个元素是否拥有 layout ，如 object.currentStyle.hasLayout 。
‘Layout’ 是 IE 浏览器渲染引擎的一个内部组成部分。在 IE 浏览器中，一个元素要么自己对自身的内容进行组织和计算大小， 要么依赖于包含块来计算尺寸和组织内容。为了协调这两种方式的矛盾，渲染引擎采用了 ‘hasLayout’ 属性，属性值可以为 true 或 false。 当一个元素的 ‘hasLayout’ 属性值为 true 时，我们说这个元素拥有了一个布局（layout），即成功触发hasLayout
触发方式：
默认拥有布局的元素：
<html>, <body>
<table>, <tr>, <th>, <td>
<img>
<hr>
<input>, <button>, <select>, <textarea>, <fieldset>, <legend>
<iframe>, <embed>, <object>, <applet>
<marquee>
可触发 hasLayout 的 CSS 特性：
display: inline-block /*ALL*/
height: (除 auto 外任何值) /*仅适用IE6 7*/
(除 auto 外任何值) /*仅适用IE6 7*/
float: (left 或 right) /*ALL*/
position: absolute /*ALL*/
writing-mode: tb-rl /*ALL*/
zoom: (除 normal 外任意值) /*仅适用IE6 7*/
IE7 还有一些额外的属性(不完全列表)可以触发 hasLayout ：
min-height: (任意值)/*以下适用IE7+*/
min- (任意值)
max-height: (除 none 外任意值)
max- (除 none 外任意值)
overflow: (除 visible 外任意值，仅用于块级元素)
overflow-x: (除 visible 外任意值，仅用于块级元素)
overflow-y: (除 visible 外任意值，仅用于块级元素)
position: fixed
IE6 以前的版本（也包括 IE6 及以后所有版本的混杂模式，其实这种混杂模式在渲染方面就相当于 IE 5.5）， 通过设置任何元素的 ‘width’ 或 ‘height’（非auto）都可以触发 hasLayout ； 但在 IE6 和 IE7 的标准模式中的行内元素上却不行，设置 ‘display:inline-block’ 才可以。
hasLayout的作用与BFC相差不大
特点：显示背景图：在 IE 7 及以下的 IE 版本中，没有设置高度、宽度的元素往往不能显示出背景图（背景色则显示正常），这实际上与 hasLayout 有关。实际的情况是，没有触发 hasLayout 的元素不能显示背景图，上面有说过，触发 hasLayout 也就是使到元素拥有布局，换句话说，拥有布局的元素才能正确显示背景图。
参考文章：
http://kayosite.com/block-formatting-contexts-in-detail.html
http://kayosite.com/internet-explorer-haslayout-in-detail.html
http://www.cnblogs.com/pigtail/archive/2013/01/23/2871627.html
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Block_formatting_context#Specifications
http://www.aliued.cn/2012/12/31/css布局中一个简单的应用bfc的例.html
http://www.smallni.com/haslayout-block-formatting-contexts/
http://www.17leba.com/haslayout与bfcblock-formatting-contexts的深入理解/