在百度ife2016的任務(wù)3中，實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的三欄布局。左右欄寬度固定，中間欄寬度自適應(yīng)。父元素的高度應(yīng)該等于三欄中最高的一個(gè)。

在這里遇到了一個(gè)問(wèn)題：使用 float: left 和 float: right 控制左右欄，然后在父元素中使用 overflow: hidden 來(lái)清除浮動(dòng)，使父元素高度等于三欄中最高。

在IE6中進(jìn)行測(cè)試，發(fā)現(xiàn)如果左右欄高于中間欄，則高出的部分會(huì)溢出。

搜索之后找到了解決辦法，就是在父元素中加一個(gè) _zoom: 1; 原理大概是觸發(fā)瀏覽器的haslayout機(jī)制。

haslayout 機(jī)制：

在IE中，一個(gè)元素要么自己對(duì)自身的內(nèi)容進(jìn)行計(jì)算和組織，要么依賴于父元素來(lái)計(jì)算尺寸和組織內(nèi)容。

當(dāng)haslayout屬性為true時(shí)，就說(shuō)元素有一個(gè)layout。此時(shí)，元素就要擴(kuò)展去包含它的流出的內(nèi)容。例如浮動(dòng)或者很長(zhǎng)的沒(méi)有截?cái)嗟膯卧~，如果haslayout沒(méi)有被設(shè)置成true，那么元素就要依靠某個(gè)祖先元素來(lái)渲染它。

當(dāng)一個(gè)元素有l(wèi)ayout時(shí)，它負(fù)責(zé)對(duì)自己和可能的子孫元素進(jìn)行尺寸計(jì)算和定位。這樣它就要花更大的代價(jià)來(lái)維護(hù)自身及里面的內(nèi)容，而不是依賴于祖先元素來(lái)完成這些工作。