一、前面的一些YY
首先，不知道您注意到?jīng)]有，標(biāo)題“清除浮動(dòng)”加了個(gè)引號(hào)。我最近在想，這個(gè)所謂的“清除浮動(dòng)”的是否準(zhǔn)確。人有從眾的心理，尤其在我們這個(gè)集體主義文化的社會(huì)，從眾并不是一個(gè)消極的標(biāo)簽，在亞洲集體主義文化里（例如日本），其象征著忍耐，自我控制，以及成熟，但是，有時(shí)會(huì)延續(xù)一些不準(zhǔn)確的觀點(diǎn)，還記得小學(xué)“兩個(gè)鐵球同時(shí)落地”的故事嗎。
我這里要說一些個(gè)人的，很情感化的東西，非常歡迎反駁。我在國外的技術(shù)上也經(jīng)常見到”clear float”一詞，翻譯過來就是“清除浮動(dòng)”，我入行較淺，所以我只能臆想，是不是“清除浮動(dòng)”確實(shí)表示了那個(gè)意思，于是就廣泛使用，越是使用廣泛越不容易發(fā)現(xiàn)其中的不嚴(yán)謹(jǐn)之處。
我最近思考“清除浮動(dòng)”的一些東西，發(fā)現(xiàn)，“清除浮動(dòng)”這個(gè)說法越想越覺得不準(zhǔn)確。準(zhǔn)確的說法應(yīng)該是“清除浮動(dòng)造成的影響”，真正的“清除浮動(dòng)”是什么呢，float:none;這才是“清除浮動(dòng)”的字面意思。當(dāng)然，也有可能是“清除浮動(dòng)”就是個(gè)簡稱，意思就是“清除浮動(dòng)造成的影響”，只是叫了順口，大家也都這么稱呼了，大家其實(shí)都心知肚明。希望自己是想多了。
YY結(jié)束，進(jìn)入本文正題，一些思考性的內(nèi)容，講講我對(duì)overflow與zoom可以清除浮動(dòng)造成影響的原因的理解，都是些淺薄的認(rèn)識(shí)，希望真正理解的人能夠指點(diǎn)糾正，大大歡迎反駁，發(fā)表您自己的觀點(diǎn)。
二、元素的包裹性
“包裹”這個(gè)名詞常出現(xiàn)在JavaScript中，尤其jQuery之類的js庫，很形象的一個(gè)詞。昨天我看到這么句很有啟發(fā)性的話：“視覺化思考能以獨(dú)特而有效的方式，讓你的心有更大的空間來解決問題?！眴l(fā)性在于，這里的“視覺化思考”改為其他一些名詞，例如“情感化思考”，“形象化思考”等同樣受用。也就是在思考問題的時(shí)候融入一些很主觀的非邏輯性的思考有助于有更廣闊的空間來解決問題。
一提到“包裹”一詞，我想到了就是白細(xì)胞吞噬細(xì)菌（形象化思考 – 聯(lián)想），以及溫暖及安心（情感化思考）。這因人遺傳、成長等因素相關(guān)。為什么我要講這些看似無關(guān)主題的東西，因?yàn)橄旅嫖乙獙⒌暮芏鄸|西就是自己的感覺，“我覺得它就是這個(gè)樣子的”，很多主觀的東西。
（1）下面我們來看下zoom在非IE瀏覽器中的作用：看下面的例子，我是在谷歌瀏覽器下訪問的，在該例子中zoom的作用是放大為原來的2倍（讀者可以自己嘗試縮小操作）
1.zoom:1 時(shí)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
p{
width: 100px;
height: 100px;
border: 3px solid red;
zoom: 1;
}
</style>
</head>
<body>
<p>hello</p>
</body>
<html>
以上代碼的結(jié)果如圖：
2.zoom：2 即放大為原來的2倍：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
p{
width: 100px;
height: 100px;
border: 3px solid red;
zoom: 1;
}
</style>
</head>
<body>
<p>hello</p>
</body>
<html>注意：zoom在非IE瀏覽器中表現(xiàn)為支持放大或者縮小，但是由于這個(gè)屬性是一個(gè)不標(biāo)準(zhǔn)的css屬性，因此一般在非IE瀏覽器中不用zoom來實(shí)現(xiàn)p 的縮放效果，現(xiàn)在要放大或者縮小直接用css3的transform屬性。
（2）看完了zoom在非IE瀏覽器中的表現(xiàn)之后，我們就該看看這個(gè)屬性在IE瀏覽器中的作用了。
Zoom的使用方法：
zoom :? normal | number
normal : 默認(rèn)值。使用對(duì)象的實(shí)際尺寸
number : 百分?jǐn)?shù) | 無符號(hào)浮點(diǎn)實(shí)數(shù)。浮點(diǎn)實(shí)數(shù)值為1.0或百分?jǐn)?shù)為100%時(shí)相當(dāng)于此屬性的 normal 值用白話講解就是zoom:后面的數(shù)字即放大的倍數(shù)，可以是數(shù)值，也可以是百分比。如：zoom:1，zoom:120%。而這個(gè)屬性只要在IE中才起作用，所以很少用到它的實(shí)際用途，而最經(jīng)常用到作用是清除浮動(dòng)等，如：
.border{
border:1px solid #CCC;
padding:2px;
overflow:hidden;
_zoom:1;
}
_zoom是CSS hack中專對(duì)IE6起作用的部分。IE6瀏覽器會(huì)執(zhí)行zoom:1表示對(duì)象的縮放比例，但這里
overflow:hidden;和_zoom:1;是連起來用的，作用是清除border內(nèi)部浮動(dòng)。
同理，還可以使用同樣方法清除margin屬性在IE瀏覽器中的重疊問題：這就要提到zoom屬性在IE中的第二個(gè)作用了，即
兼容IE6、IE7、IE8瀏覽器，經(jīng)常會(huì)遇到一些問題，可以使用zoom:1來解決，有如下作用：
(2)觸發(fā)IE瀏覽器的haslayout ,解決ie下的浮動(dòng)，margin重疊等一些問題。
比如，本站使用p做一行兩列顯示，HTML代碼：
<p class="h_mainbox"> <h2>推薦文章</h2> <ul class="mainlist"> <li><a href="#" style="color:#0000FF" target="_blank">CSS庫吧</a></li> <li><a href="#" style="color:#0000FF" target="_blank">原創(chuàng)< /a></li> </ul> </p>
CSS代碼：
.h_mainbox { border:1px solid #dadada; padding:4px 15px; background:url(../mainbox_bg.gif) 0 1px repeat-x; margin-bottom:6px; overflow:hidden}
.h_mainbox h2 { font-size:12px; height:30px; line-height:30px; border-bottom:1px solid #ccc; color:#555;}
.h_mainbox h2 span { float:right; font-weight:normal;}
.h_mainbox ul { padding:6px 0px; background:#fff;}
.mainlist { overflow:auto; zoom:1;}
.h_mainbox li { width:268px; float:left; height:24px; overflow:hidden; background:url(../icon3.gif) 0 6px no-repeat; padding:0px 5px 0px 18px; line-height:200%;}.mainlist里面的zoom:1的那里就可以在IE6、IE7、IE8正常顯示效果了。
(3)下面是zoom屬性在IE瀏覽器中常見作用總結(jié)，希望對(duì)今后在使用這個(gè)屬性時(shí)有所幫助：
1、檢查頁面的標(biāo)簽是否閉合
不要小看這條，也許折騰了你兩天都沒有解決的 CSS BUG 問題，卻僅僅源于這里。畢竟頁面的模板一般都是由開發(fā)來嵌套的，而他們很容易犯此類問題。
快捷提示：可以用 Dreamweaver 打開文件檢查，一般沒有閉合的標(biāo)簽，會(huì)黃色背景高亮。
2、樣式排除法
有些復(fù)雜的頁面也許加載了 N 個(gè)外鏈 CSS 文件，那么逐個(gè)刪除 CSS 文件，找到 BUG 觸發(fā)的具體 CSS 文件，縮小鎖定的范圍。
對(duì)于剛才鎖定的問題 CSS 樣式文件，逐行刪除具體的樣式定義，定位到具體的觸發(fā)樣式定義，甚至是具體的觸發(fā)樣式屬性。
3、模塊確認(rèn)法
有時(shí)候我們也可以從頁面的 HTML 元素出發(fā)。刪除頁面中不同的 HTML 模塊，尋找到觸發(fā)問題的 HTML 模塊。
4、檢查是否清除浮動(dòng)
其實(shí)有不少的 CSS BUG 問題是因?yàn)闆]有清除浮動(dòng)造成的。養(yǎng)成良好的清除浮動(dòng)的習(xí)慣是必要的，推薦使用 無額外 HTML 標(biāo)簽的清除浮動(dòng)的方法（盡量避免使用 overflow:hidden;zoom:1 的類似方法來清除浮動(dòng)，會(huì)有太多的限制性）。
5、檢查 IE 下是否觸發(fā) haslayout
很多的 IE 下復(fù)雜 CSS BUG 都與 IE 特有的 haslayout 息息相關(guān)。熟悉和理解 haslayout 對(duì)于處理復(fù)雜的 CSS BUG 會(huì)事半功倍。推薦閱讀 old9 翻譯的 《On having layout》（如果無法翻越穿越偉大的 GFW，可閱讀 藍(lán)色上的轉(zhuǎn)帖 ）
快捷提示：如果觸發(fā)了 haslayout，IE 的調(diào)試工具 IE Developer Toolbar 中的屬性中將會(huì)顯示 haslayout 值為 -1。
6、邊框背景調(diào)試法
故名思議就是給元素設(shè)置顯眼的邊框或者背景（一般黑色或紅色），進(jìn)行調(diào)試。此方法是最常用的調(diào)試 CSS BUG 的方法之一，對(duì)于復(fù)雜 BUG 依舊適用。經(jīng)濟(jì)實(shí)惠還環(huán)保^^
最后想強(qiáng)調(diào)一點(diǎn)的是，養(yǎng)成良好的書寫習(xí)慣，減少額外標(biāo)簽，盡量語義，符合標(biāo)準(zhǔn)，其實(shí)可以為我們減少很多額外的復(fù)雜 CSS BUG，更多的時(shí)候其實(shí)是我們自己給自己制造了麻煩。
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2024 51dongshi.com 版權(quán)所有
違法及侵權(quán)請(qǐng)聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務(wù)所王興未律師提供法律服務(wù)
