目录：
一、BFC
二、IE 中的 hasLayout
三、BFC 和 hasLayout 的联系和区别

IE 中的 hasLayout

什么是 hasLayout？

Layout 是 IE 渲染引擎的一个内部组成部分。在IE中，一个元素要么自己对自身的内容进行组织和计算，要么依赖于包含块来计算尺寸和组织内容。为了协调这两种方式的矛盾，渲染引擎采用了 hasLayout 属性。该属性值要么是 true，要么是 false。当一个元素的 hasLayout 是 true 时，我们说这个元素拥有布局。可以用 .currentStyle.hasLayout 查看当前元素的 hasLayout 属性的值。

hasLayout 和 BFC有很多相似之处，但 hasLayout 的概念更容易理解。在 IE 中，元素使用“布局 layout”的概念来控制尺寸和定位，分为：拥有布局和没有布局这两种情况。拥有布局的元素，由它控制本身及其子元素的尺寸和定位；没有布局的元素，则通过父元素（最近的拥有布局的祖先元素）来控制尺寸和定位。而一个元素是否拥有布局，则由 haslayout 属性来告之浏览器。

简而言之，hasLayout 只是 IE 下的一个专有属性，haslayout=true 时，元素拥有布局，浏览器会赋予它一系列的效果。haslayout=false 时，元素没有布局。

如何触发？

一个元素触发 hasLayout 会影响它的尺寸和定位，这会消耗更多的系统资源。所以 IE 默认只为一部分元素触发 hasLayout，即默认部分元素本身就会触发 hasLayout。这与 BFC 的基本完全由开发者通过特定 CSS 来触发不一样。

在 IE 中，下面的这些元素本身就“拥有布局”，即默认 hasLayout 就是 true：
html,body
table tr th td
img hr
HTMLInputElement: input button select textarea fieldset legend
iframe embed object applet
marquee

通过给元素设置以下任意 CSS，也可以触发 hasLayout，即可以把元素的 hasLayout 属性设置为 true。

1. 和触发 BFC 略相似的
   display:inline-block
   float: left|right
   position:absolute|fixed
   overflow:除 visible 任意值，仅用于块级元素
2. zoom: 除 normal 任何值 【所以，大部分设置它….】
3. 宽高类
   height:除 auto 任何值
   width:除 auto 任何值
   min-height: 任意值
   max-height: 任意值
4. writing-mode: tb-rl //什么东西？？

说明：
考虑到浏览器的兼容性+对元素自己的影响，一般都用 zoom:1 来触发元素的 hasLayout。[ 在 IE5-6 中，设置 width 和 height 来触发 hasLayout 会有兼容性问题。 ]

BFC 和 hasLayout 间的区别和联系

联系

hasLayout 表现出来的特性和 BFC 很相似，所以可以认为它是 IE 中的 BFC，BFC的布局规则它几乎都遵循。

区别

1. 它两本质上不是一个东西
   虽然 hasLayout 也会像 BFC 那样影响着元素的尺寸和定位，但它们不是一套完整的标准。
2. 触发的机制不同
   BFC 是通过设置特定的 CSS 来触发的。而IE中的 hasLayout，除了用 CSS 触发外，还有部分元素默认hasLayout=true，也就是说 “IE 中 hasLayout 的范围更宽泛些” 。

建议

建议：触发元素 BFC 的同时，也触发 hasLayout。这样可以统一 IE 和 BFC 浏览器的表现。

由于 IE 中 hasLayout 的特殊触发机制，会导致一些 IE 中的页面bug。触发 hasLayout 的更大意义在于解决一些 IE 下的 bug，而不是利用它的一些“副作用”来达到某些效果。

参考

BFC和IE的hasLayout：http://www.cnblogs.com/pigtail/archive/2013/01/23/2871627.html
https://msdn.microsoft.com/en-us/library/ms530764(v=vs.85).aspx