一.hasLayout 是什么？
hasLayout 與 BFC 有很多相似之處，但 hasLayout 的概念會(huì)更容易理解。在 Internet Explorer 中，元素使用“布局”概念來(lái)控制尺寸和定位，分為擁有布局和沒(méi)有布局兩種情況，擁有布局的元素由它控制本身及其子元素的尺寸和定位，而沒(méi)有布局的元素則通過(guò)父元素（最近的擁有布局的祖先元素）來(lái)控制尺寸和定位，而一個(gè)元素是否擁有布局則由 hasLayout 屬性告知瀏覽器，它是個(gè)布爾型變量，true 代表元素?fù)碛胁季?，false 代表元素沒(méi)有布局。簡(jiǎn)而言之，hasLayout 只是一個(gè) IE 下專(zhuān)有的屬性，hasLayout 為 true 的元素瀏覽器會(huì)賦予它一系列的效果。

特別注意的是，hasLayout 在 IE 8 及之后的 IE 版本中已經(jīng)被拋棄，所以在實(shí)際開(kāi)發(fā)中只需針對(duì) IE 8 以下的瀏覽器為某些元素觸發(fā) hasLayout 。

一個(gè)元素觸發(fā) hasLayout 會(huì)影響一個(gè)元素的尺寸和定位，這樣會(huì)消耗更多的系統(tǒng)資源，因此 IE 設(shè)計(jì)者默認(rèn)只為一部分的元素觸發(fā) hasLayout （即默認(rèn)有部分元素會(huì)觸發(fā) hasLayout ，這與 BFC 基本完全由開(kāi)發(fā)者通過(guò)特定 CSS 觸發(fā)并不一樣），這部分元素如下：

body and html
table, tr, th, td
img
hr
input, button, file, select, textarea, fieldset
marquee
frameset, frame, iframe
objects, applets, embed

二.如何觸發(fā) hasLayout
除了 IE 默認(rèn)會(huì)觸發(fā) hasLayout 的元素外，Web 開(kāi)發(fā)者還可以使用特定的 CSS 觸發(fā)元素的 hasLayout 。

通過(guò)為元素設(shè)置以下任一 CSS ，可以觸發(fā) hasLayout （即把元素的 hasLayout 屬性設(shè)置為 true）。

float: (left 或 right)
position: absolute
display: inline-block
width: (除 auto 外任何值)
height: (除 auto 外任何值)
writing-mode: tb-rl
zoom: (除 normal 外任意數(shù)值，包括設(shè)置為效果等同于 normal 的 1 也有效)
另外，一些 CSS 在 IE 7 下亦能觸發(fā) hasLayout。

min-width: (包含 0 在內(nèi)的任意值)
max-width: (除 none 外任意值)
min-height: (包含 0 在內(nèi)的任意值)
max-height: (除 none 外任意值)
overflow 除了 visible 以外的值（hidden，auto，scroll）
position: fixed
對(duì)于內(nèi)聯(lián)元素(可以是默認(rèn)被瀏覽器認(rèn)為是內(nèi)聯(lián)元素的 span 元素，也可以是設(shè)置了 display: inline 的元素)，width 和 height 只在 IE5.x 下和 IE6 或更新版本的 quirks 模式下能觸發(fā)元素的 hasLayout ，但是對(duì)于 IE6，如果瀏覽器運(yùn)行于標(biāo)準(zhǔn)兼容模式下，內(nèi)聯(lián)元素會(huì)忽略 width 或 height 屬性，所以設(shè)置 width 或 height 不能在此種情況下令該元素觸發(fā) hasLayout 。但 zoom 除了在 IE 5.0 中外，總是能觸發(fā) hasLayout 。zoom 用于設(shè)置或檢索元素的縮放比例，為元素設(shè)置 zoom: 1 既可以觸發(fā)元素的 hasLayout 同時(shí)不會(huì)對(duì)元素造成多余的影響。因此綜合考慮瀏覽器之間的兼容和對(duì)元素的影響，Kayo 建議使用 zoom: 1 來(lái)觸發(fā)元素的 hasLayout 。

三.觸發(fā) hasLayout 的效果
雖然 hasLayout 也會(huì)像 BFC 那樣影響著元素的尺寸和定位，但它卻又不是一套完整的標(biāo)準(zhǔn)，并且由于它默認(rèn)只為某些元素觸發(fā)，這導(dǎo)致了 IE 下很多前端開(kāi)發(fā)的 bugs ，觸發(fā) hasLayout 更大的意義在于解決一些 IE 下的 bugs ，而不是利用它的一些“副作用”來(lái)達(dá)到某些效果。另外由于觸發(fā) hasLayout 的元素會(huì)出現(xiàn)一些跟觸發(fā) BFC 的元素相似的效果，因此為了統(tǒng)一元素在 IE 與支持 BFC 的瀏覽器下的表現(xiàn)，Kayo 建議為觸發(fā)了 BFC 的元素同時(shí)觸發(fā) hasLayout ，當(dāng)然還需要考慮實(shí)際的情況，也有可能只需觸發(fā)其中一個(gè)就可以達(dá)到表現(xiàn)統(tǒng)一，下面會(huì)舉例介紹。

這里首先列出觸發(fā) hasLayout 元素的一些效果：

1.阻止外邊距折疊

兩個(gè)相連的 div 在垂直上的外邊距會(huì)發(fā)生疊加，而觸發(fā) hasLayout 的元素之間則不會(huì)有這種情況發(fā)生，如下圖：

上圖的例子中，三個(gè) div 各包含一個(gè) p 元素，三個(gè) div 及其包含的 p 元素都有頂部和底部的外邊距，但只有第三個(gè) div 的邊距沒(méi)有與它的子元素 p 的外邊距折疊。這是因?yàn)榈谌齻€(gè) div 使用 zoom: 1 觸發(fā)了 hasLayout ，阻止了它與它的子元素的外邊距折疊。

另外，例子中也使用了 overflow: hidden 觸發(fā)元素的 BFC ，這利用了 BFC 阻止外邊距折疊的特性達(dá)到元素在 IE 與現(xiàn)代瀏覽器下的表現(xiàn)統(tǒng)一。

2.可以包含浮動(dòng)的子元素，即計(jì)算高度時(shí)包括其浮動(dòng)子元素

效果如圖：

上圖的例子中，有兩個(gè) div ，它們各包含一個(gè)設(shè)置了浮動(dòng)的 p 元素，但第一個(gè) div 實(shí)際被瀏覽器判斷為沒(méi)有高度和寬度，即高度為 0 ，上下邊框重疊在一起。而第二個(gè) div 使用 zoom: 1 觸發(fā)了 hasLayout ，可以包含浮動(dòng)元素，因此能正確表現(xiàn)出高度，其邊框位置也正常了。

本例子中也使用了 overflow: hidden 觸發(fā) BFC ，跟上例相似，這利用了 BFC 可以包含浮動(dòng)子元素的特性達(dá)到元素在 IE 與現(xiàn)代瀏覽器下的表現(xiàn)統(tǒng)一。

3.背景圖像顯示問(wèn)題

元素背景圖不能正確顯示是網(wǎng)頁(yè)重構(gòu)中最常見(jiàn)的問(wèn)題之一了，在 IE 7 及以下的 IE 版本中，沒(méi)有設(shè)置高度、寬度的元素往往不能顯示出背景圖（背景色則顯示正常），這實(shí)際上與 hasLayout 有關(guān)。實(shí)際的情況是，沒(méi)有觸發(fā) hasLayout 的元素不能顯示背景圖，上面有說(shuō)過(guò)，觸發(fā) hasLayout 也就是使到元素?fù)碛胁季?，換句話(huà)說(shuō)，擁有布局的元素才能正確顯示背景圖。如下圖：

上圖兩個(gè) div 都設(shè)置了背景圖，但只有使用 zoom: 1 觸發(fā)了 hasLayout 的第二個(gè) div 才能正確顯示背景圖。

本例子中沒(méi)有觸發(fā)元素的 BFC ，這是因?yàn)樵诂F(xiàn)代瀏覽器中，元素本身并沒(méi)有背景圖顯示問(wèn)題。

可以看出，上面的第一、二個(gè)例子中，為了使到元素在 IE (包括低版本 IE 以及較新版本的 IE)和現(xiàn)代瀏覽器中表現(xiàn)盡量統(tǒng)一同時(shí)觸發(fā)了 hasLayout 和 BFC ，而第三個(gè)例子中的問(wèn)題因?yàn)橹辉诘桶姹?IE 中出現(xiàn)，所以只需為低版本 IE 觸發(fā) hasLayout ，這些技巧在實(shí)際項(xiàng)目中需要特別注意。

上面也有說(shuō)道，hasLayout 與很多 IE 下的顯示 bugs 都有關(guān)，實(shí)際上很多莫名奇妙的 bugs 都因 hasLayout 而起，因此只要適當(dāng)?shù)挠|發(fā)元素的 hasLayout ，很多 IE bugs 往往就能解決。這里 Kayo 列舉幾個(gè)例子：

IE 6 及更低版本下浮動(dòng)元素雙倍 margin bug - 為元素設(shè)置 display: inline 可以解決
IE 5-6 的 3 像素偏移 bug - 為元素設(shè)置 _height: 1% 可以解決