《
CSS教程：overflow屬性知多少》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302333a2013.htm
overflow還有一個(gè)鮮為人知的特征，那就是可觸發(fā)IE7的hasLayout，讓我們來看看觸發(fā)hasLayout不完整列表吧：
知識：如何實(shí)現(xiàn)最小高度
1.overflow:hidden寫在應(yīng)用在包裹元素上的.body和.main，其目的是利用其清除浮動的特性而非隱藏內(nèi)部元素特性。
2.為了兼容性要觸發(fā)IE6/7的hasLayout。這里應(yīng)用overflow:hidden的特性以最小的代價(jià)在IE7下清除浮動效果同時(shí)并觸發(fā)hasLayout，一舉二得。IE6用的是專有Hack和zoom屬性（_zoom:1）來觸發(fā)hasLayout。
3.既然我們應(yīng)用overflow:hidden是為了掃除浮動，所以我們相對不能讓元素有高度屬性。而實(shí)際工作中，往往請求必要的根本高度來達(dá)到公道的布局要求，那么這個(gè)時(shí)候須要使用最小高度min-height，依據(jù)前面的知識我們得悉IE6實(shí)現(xiàn)最小高度的方式是用height實(shí)現(xiàn)，而我們的overflow:hidden為了消除浮動大局觀是不容許呈現(xiàn)固定高度的，使用了hidden再增加了height，那么overflow的特性則產(chǎn)生改變，變成了暗藏溢出的功效。這里次應(yīng)用IE6下的overflow:visible的bug，讓IE6下的父元素主動撐開，達(dá)到了所謂的清除浮動的目標(biāo)，能夠說的上是歪打正著，于是乎，發(fā)生了_overflow:visible的寫法。
最小高度min-height已經(jīng)被大多瀏覽器所支撐，而且他的適用性也使得他被普遍的使用，但其中獨(dú)一的遺憾那就是IE6不支持min-height！所以，為了兼容性，你必需得使IE6也能兼容min-height。所幸的是這并不難實(shí)現(xiàn)，IE6在設(shè)計(jì)之初就有一個(gè)問題，他雖有height屬性，但是一旦內(nèi)部元素高度超出父元素，其父元素也會很隨著內(nèi)部元素一起增高，外部元素高度值會即是內(nèi)部元素的高度值，所以說IE6下生成就有鄙陋的min-height屬性，帶著height的面具，干著min-height的活，頗有點(diǎn)垂簾聽政一感到。所以碰到實(shí)現(xiàn)最小高度的情況我們利用IE6的Hack來實(shí)現(xiàn)。
[ 提醒：你可先修正局部代碼，再按Ctrl+A 全體抉擇 ]
IE6會扭曲默認(rèn)的overflow visible值并將程度的擴(kuò)展一個(gè)盒子一匹配內(nèi)容。 在IE6下（當(dāng)div有詳細(xì)height）運(yùn)用默認(rèn)的visible是沒有一點(diǎn)效果的，因?yàn)镮E6的高度會自適應(yīng)（IE6沒有min-height,CSS教程：CSS3圓角屬性，但height就是min-height），子元素增大，父元素也會跟著一起增大，你想讓子元素超出父元素,CSS教程之文章內(nèi)容樣式表現(xiàn)的技巧，且父元素高度不變，在IE6下是行不通的。舉個(gè)例子：
可觸發(fā)hasLayout的CSS特性：
--> [
網(wǎng)站建設(shè)之]CSS教程：overflow屬性知多少
overflow屬性劃定當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事件。——W3shcool
短短三個(gè)屬性居然包括了浮動、浮動肅清、Haslayout、IE6兼容性、最小高度不同閱讀器下實(shí)現(xiàn)、瀏覽器Hack、overflow的各種用處等等一系列的問題及常識點(diǎn)。咱們在分析之前，先彌補(bǔ)一下是基礎(chǔ)知識，否則等最后剖析了半天你聽的一頭霧水這不是本文想到達(dá)的后果。
min-height: (任意值)
min-width: (任意值)
max-height: (除 none 外任意值)
max-width: (除 none 外任意值)
overflow: (除 visible 外任意值，僅用于塊級元素)
overflow-x: (除 visible 外任意值，僅用于塊級元素)
overflow-y: (除 visible 外任意值，僅用于塊級元素)
position: fixed
Tag： overflow屬性 CSS教程 overflow屬性 CSS教程
IE7可觸發(fā)hasLayout的CSS 特性：
.body{overflow:hidden; _overflow:visible; _zoom:1;}
.main{overflow:hidden; _overflow:visible; _zoom:1;}
知識：overflow:hidden的用途
知識：IE6下的overflow:visible的bug
overflow:visible在IE6的表示和別的瀏覽器的在默認(rèn)情況下的表現(xiàn)不同，IE6下父元素會被撐開，最終影響到正常的文檔流，而其他瀏覽器下?lián)纬霾块T不會影響正常的文檔輸出流，即下面的元素仍是按上面元素規(guī)定的高度來顯示。要達(dá)到IE6下領(lǐng)有真正意思上的overflow:visible效果的話，需要這么做，包裹父元素設(shè)置為_overflow:hidden;接著持續(xù)設(shè)置它的子元素為_position:relative;即可。
回歸正題，接下來分析這行代碼里面各個(gè)屬性真正的意義：
兩行CSS代碼你是否能清楚是什么意思？我們一起來分析一下。
,CSS教程之內(nèi)容設(shè)置的一些語法;/* IE6利用_height實(shí)現(xiàn)min-height */
.wrap{width:100px; min-height:100px; _height:100px; background:#ccf,css教程之font-size屬性;}
.inner{width:50px; height:150px; background:#cfc}
根據(jù)CSS的盒模型概念，頁面中的每個(gè)元素，都是一個(gè)矩形的盒子。這些盒子的大小、地位和行為都可以用CSS來把持。對于行動，我的意思是當(dāng)盒子內(nèi)外的內(nèi)容轉(zhuǎn)變的時(shí)候，它如何處理。比方，假如你沒有設(shè)置一個(gè)盒子的高度，該盒子的高度將會根據(jù)它包容內(nèi)容的需要而增加。然而當(dāng)你給一個(gè)盒子指定了一個(gè)高度或?qū)挾榷锩娴膬?nèi)容超越的時(shí)候會發(fā)生什么？這就是該增添CSS的overflow屬性的時(shí)候了，它許可你設(shè)定該種情形下如何處置。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head>,CSS教程 視覺語義不等于基于表現(xiàn)的類; <meta http-equiv="Content-Type" content=",CSS教程 網(wǎng)頁字體及字體大小的設(shè)計(jì);text/html; charset=gb2312" /> <title>IE6下的overflow:visible的bug</title> <style> .wrap{width:100px; height:100px; background:#ccf;} .inner{width:50px; height:150px; background:#cfc;} .next{width:100px;} </style> </head> <body> <div class="wrap",CSS教程 編寫CSS代碼時(shí)樣式命名的規(guī)則;> <div class="inner"></div> </div> <div class=",CSS教程 浮動元素對瀏覽器的支持;next">尺度瀏覽器下wrap的內(nèi)部元素不會損壞文檔流。而IE6下父元素會被撐開，終極影響到畸形的文檔流</div> </body> </html>
對IE6/7特有的hasLayout特性，開發(fā)時(shí)需要特殊留心，某些主要部件盡量以最小的代價(jià)來觸發(fā)他的hasLayout，使得各個(gè)瀏覽器達(dá)到兼容。最小的代價(jià)指的是用標(biāo)準(zhǔn)的CSS屬性（如with, height, IE7下還能用overflow）來觸發(fā)hasLayout，防止使用不合乎標(biāo)準(zhǔn)的zoom屬性，為日后的再次開發(fā)打下基本。
overflow:hidden另一個(gè)風(fēng)行的用途是用在不寬高的div里，其目的是清除浮動。利用了overflow(auto或hidden)的元素（默認(rèn)高度height:auto）,CSS教程 所有瀏覽器中都能正常顯示的字體，將會擴(kuò)大到它需要的大小以包抄它里面的浮動的子元素。這是一個(gè)很獨(dú)特的特性，由于他的簡練，很多coder都愛好利用這個(gè)特性來清除浮動。
display: inline-block
height: (除 auto 外任何值)
width: (除 auto 外任何值)
float: (left 或 right)
position: absolute
writing-mode: tb-rl
zoom: (除 normal 外任意值)
我們平時(shí)最常用到的即overflow:hidden，個(gè)別用在固定寬高的div里面，目的是隱藏溢出使內(nèi)部元素高度即便超過父元素也可能被隱蔽。
overflow屬性有四個(gè)值：visible (默認(rèn)),CSS教程 關(guān)于網(wǎng)頁圖片的屬性, hidden, scroll, 和auto。這里我們只分析 overflow:visible跟hidden其余倆屬性這里未幾做開展，有興致的讀者可以上網(wǎng)查一下另外倆個(gè)屬性的知識。
overflow是什么，有什么用途：
(責(zé)任編輯：網(wǎng)站建設(shè))
CSS教程：overflow屬性知多少相關(guān)文章