在百度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)完成這些工作肉津。