關(guān)于overflow，你知道多少？
來(lái)源 |?http://www.hicss.net/some-overflow-knowledge/
最近，在研究OOCSS，當(dāng)打開(kāi)template.css閱讀第一行時(shí)，震驚了，第一眼居然沒(méi)看懂。。。。。。以下就是OOCSS下的template.css第一行代碼：
.body{overflow:hidden; _overflow:visible; _zoom:1;}.main{overflow:hidden; _overflow:visible; _zoom:1;}
后來(lái)分析這段代碼，不分析不知道，一分析嚇一跳，短短三個(gè)屬性竟然包含了浮動(dòng)、浮動(dòng)清除、Haslayout、IE6兼容性、最小高度不同瀏覽器下實(shí)現(xiàn)、瀏覽器Hack、overflow的各種用途等等一系列的問(wèn)題及知識(shí)點(diǎn)。
廢話不多說(shuō)，且榮我細(xì)細(xì)道來(lái)這行代碼的可怕之處！
在分析之前，先補(bǔ)充一下是基本知識(shí)，否則等最后分析了半天你聽(tīng)的一頭霧水這不是本文想達(dá)到的效果。
overflow是什么，有什么用途：
overflow屬性規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事情。——W3shcool
根據(jù)CSS的盒模型概念，頁(yè)面中的每個(gè)元素，都是一個(gè)矩形的盒子。這些盒子的大小、位置和行為都可以用CSS來(lái)控制。對(duì)于行為，我的意思是當(dāng)盒子內(nèi)外的內(nèi)容改變的時(shí)候，它如何處理。
比如，如果你沒(méi)有設(shè)置一個(gè)盒子的高度，該盒子的高度將會(huì)根據(jù)它容納內(nèi)容的需要而增長(zhǎng)。但是當(dāng)你給一個(gè)盒子指定了一個(gè)高度或?qū)挾榷锩娴膬?nèi)容超出的時(shí)候會(huì)發(fā)生什么？這就是該添加CSS的overflow屬性的時(shí)候了，它允許你設(shè)定該種情況下如何處理。
overflow屬性有四個(gè)值：visible (默認(rèn)), hidden, scroll, 和auto。這里我們只分析 overflow:visible和hidden其他倆屬性這里不多做展開(kāi)，有興趣的讀者可以上網(wǎng)查一下另外倆個(gè)屬性的知識(shí)。
知識(shí)：overflow:hidden的用途
我們平時(shí)最常用到的即overflow:hidden，一般用在固定寬高的div里面，目的是隱藏溢出使內(nèi)部元素高度即使超過(guò)父元素也能夠被隱藏。
overflow:hidden另一個(gè)流行的用途是用在沒(méi)有寬高的div里，其目的是清除浮動(dòng)。應(yīng)用了overflow(auto或hidden)的元素（默認(rèn)高度height:auto），將會(huì)擴(kuò)展到它需要的大小以包圍它里面的浮動(dòng)的子元素。
這是一個(gè)很奇特的特性，因?yàn)樗暮?jiǎn)潔，許多coder都喜歡利用這個(gè)特性來(lái)清除浮動(dòng)。
overflow還有一個(gè)鮮為人知的特性，那就是可觸發(fā)IE7的hasLayout，讓我們來(lái)看看觸發(fā)hasLayout不完全列表吧：
可觸發(fā)hasLayout的CSS特性：
display: inline-blockheight: (除 auto 外任何值)width: (除 auto 外任何值)float: (left 或 right)position: absolutewriting-mode: tb-rlzoom: (除 normal 外任意值)
IE7可觸發(fā)hasLayout的CSS 特性：
min-height: (任意值)min-width: (任意值)max-height: (除 none 外任意值)max-width: (除 none 外任意值)overflow: (除 visible 外任意值，僅用于塊級(jí)元素)overflow-x: (除 visible 外任意值，僅用于塊級(jí)元素)overflow-y: (除 visible 外任意值，僅用于塊級(jí)元素)position: fixed
對(duì)于IE6/7特有的hasLayout特性，開(kāi)發(fā)時(shí)需要特別留意，某些重要部件盡量以最小的代價(jià)來(lái)觸發(fā)他的hasLayout，使得各個(gè)瀏覽器達(dá)到兼容。
最小的代價(jià)指的是用標(biāo)準(zhǔn)的CSS屬性（如with, height, IE7下還能用overflow）來(lái)觸發(fā)hasLayout，避免使用不符合規(guī)范的zoom屬性，為日后的再次開(kāi)發(fā)打下基礎(chǔ)。
知識(shí)：如何實(shí)現(xiàn)最小高度
最小高度min-height已經(jīng)被大多瀏覽器所支持，而且他的實(shí)用性也使得他被廣泛的使用，但其中唯一的遺憾那就是IE6不支持min-height！所以，為了兼容性，你必須得使IE6也能兼容min-height。
所幸的是這并不難實(shí)現(xiàn)，IE6在設(shè)計(jì)之初就有一個(gè)問(wèn)題，他雖有height屬性，但是一旦內(nèi)部元素高度超出父元素，其父元素也會(huì)很跟著內(nèi)部元素一起增高，外部元素高度值會(huì)等于內(nèi)部元素的高度值，所以說(shuō)IE6下天生就有猥瑣的min-height屬性，帶著height的面具，干著min-height的活，頗有點(diǎn)垂簾聽(tīng)政一感覺(jué)。所以遇到實(shí)現(xiàn)最小高度的情況我們利用IE6的Hack來(lái)實(shí)現(xiàn)。
/* IE6利用_height實(shí)現(xiàn)min-height */.wrap{width:100px; min-height:100px; _height:100px; background:#ccf;}.inner{width:50px; height:150px; background:#cfc}
知識(shí)：IE6下的overflow:visible的bug
IE6會(huì)扭曲默認(rèn)的overflow visible值并將水平的擴(kuò)展一個(gè)盒子一匹配內(nèi)容。
在IE6下（當(dāng)div有具體height）應(yīng)用默認(rèn)的visible是沒(méi)有一點(diǎn)效果的，因?yàn)镮E6的高度會(huì)自適應(yīng)（IE6沒(méi)有min-height，但height就是min-height），子元素增大，父元素也會(huì)跟著一起增大，你想讓子元素超出父元素，且父元素高度不變，在IE6下是行不通的。舉個(gè)例子：
IE6下的overflow:visible的bug
