float在各瀏覽器下效果不同
2023-12-29 分類： 網(wǎng)站建設(shè)
從最初的CSS開始就有float這東西了，雖然大家都一直在用，也沒出現(xiàn)什么大不了的問題。但是float它到底對(duì)元素做了什么呢？如果突然要說float的具體行為也未必能說的出來，只是會(huì)用而已，不代表了解它。所以咱就來摸摸這個(gè)float的底，看看它有多少斤兩。
現(xiàn)在的float，運(yùn)用最廣的就是用來做布局。當(dāng)年傳的沸沸揚(yáng)揚(yáng)的所謂“DIV+CSS”布局實(shí)際上就是float布局。如果把容器內(nèi)所有元素都float了，確實(shí)很容易操作。唯一要解決的就是容器高度問題，這個(gè)在之前的文章“float布局的幾個(gè)常見問題解決”中已經(jīng)說過了。
但是float這個(gè)玩意兒出現(xiàn)的初衷不是用來給你布局的，而是讓文章中的圖片做文字環(huán)繞的。或者說，并不是一個(gè)容器能所有的元素都是float。它有可能和普通的行元素或塊元素一起被放在容器中，這時(shí)候float的行為就沒布局時(shí)那么簡單了。這里的定義是，塊元素是沒有inline性質(zhì)的元素，行元素是具有inline性質(zhì)的元素。具體可以看“inline和block的基本性質(zhì)”?，F(xiàn)在我們先看float與塊元素放在一起的性質(zhì)。
<!DOCTYPE html>
<style>
.panel {width:200px;height:100px;background:#EEE;}
.panel div {height:20px;}
.e1 {background:#E99;width:100%;}
.e2 {background:#9E9;width:40%;}
.e3 {background:#99E;width:50%;}
</style>
<div class="panel">
<div class="e1"></div>
<div class="e2"></div>
<div class="e3" style="float:left;"></div>
</div>
這個(gè)代碼中，e3并沒有跑到第二行。因?yàn)閑2是塊元素，即使內(nèi)容沒有那么多，但是它的靈魂已經(jīng)把整行都給占了。這時(shí)候float的e3就不會(huì)跑到第二行上，這就體現(xiàn)出了float的一個(gè)性質(zhì)“float元素不會(huì)浮動(dòng)到已經(jīng)被占滿的行上”?，F(xiàn)在我們修改一下代碼再做個(gè)測試。STYLE部分不變，只改后面的實(shí)體元素部分，把e3的float，放到e2上。 <div class="panel"> <div class="e1"></div> <div class="e2" style="float:left;"></div> <div class="e3"></div> </div>
這樣設(shè)置，e3就會(huì)跑到第二行上來了。不過這個(gè)代碼在IE6、7下有個(gè)BUG（右邊是IE7）。正常的浮動(dòng)元素應(yīng)該是和普通元素不在同一個(gè)深度的，所以在e3跑到第二行之后的效果應(yīng)該是像左邊的Chrome這樣e2和e3重疊的。具體在IE6、7中是什么BUG這篇文章就不說了，現(xiàn)在只要知道有這個(gè)BUG，避開它就行了。如何避開呢？我們給e3也加上float就行 <div class="panel"> <div class="e1"></div> <div class="e2" style="float:left;"></div> <div class="e3" style="float:left;"></div> </div>
float元素和普通元素重疊的效果顯然不是我們想要的，如果要重疊會(huì)用絕對(duì)定位來做，一般不會(huì)用float。所以，我們需要的是讓他們不重疊，因此給e3也加上float，讓e2和e3在同一個(gè)深度上，這樣就不會(huì)重疊了。同時(shí)也解決了低版本瀏覽器的兼容性問題。對(duì)于塊元素，flaot的影響大概就是這些。接著咱來看行元素的情況。 <!DOCTYPE html> <style> .panel {width:200px;height:100px;background:#EEE;font-size:0px;} .panel span {height:20px;display:inline-block;vertical-align:top;} .e1 {background:#E99;width:100%;} .e2 {background:#9E9;width:40%;} .e3 {background:#99E;width:50%;} </style> <div class="panel"> <span class="e1"></span> <span class="e2" style="float:left;"></span> <span class="e3"></span> </div>
和塊元素的情況不同，行元素沒有那個(gè)BUG。這就可以看出浮動(dòng)元素的另一個(gè)性質(zhì)“浮動(dòng)元素永遠(yuǎn)不會(huì)和行元素重疊”。行元素不會(huì)和塊元素重疊，也不會(huì)和浮動(dòng)元素重疊。我們在使用float布局時(shí)清除浮動(dòng)使容器保持高度就是使用了float的這個(gè)性質(zhì)。它類似助溶劑的作用，讓塊元素和浮動(dòng)元素更好的結(jié)合。不過行元素和float一起使用時(shí)在低版本瀏覽器中也有BUG，接著看代碼 <!DOCTYPE html> <style> .panel {width:200px;height:100px;background:#EEE;font-size:0px;} .panel span {height:20px;display:inline-block;vertical-align:top;} .e1 {background:#E99;width:100%;} .e2 {background:#9E9;width:40%;} .e3 {background:#99E;width:50%;} </style> <div class="panel"> <span class="e1"></span> <span class="e2"></span> <span class="e3" style="float:left;"></span> </div>
我們把e2的浮動(dòng)換到e3上，正常的邏輯應(yīng)該是像Chrome這樣e3跑到e2的左邊（左浮動(dòng)）。這也是一個(gè)float的性質(zhì)，這比較復(fù)雜，待會(huì)兒再說?？碔E的行為顯然很詭異，這就是IE6、7上的另一個(gè)BUG。這個(gè)BUG和上面的那個(gè)不太一樣，因?yàn)樗蝗菀捉鉀Q。這個(gè)BUG的行為是“在IE7-下，一行中如果有浮動(dòng)元素，那么所有的浮動(dòng)元素都必須在非浮動(dòng)元素之前”，例子中的e2是非浮動(dòng)元素，由于它不在e3這個(gè)浮動(dòng)元素之前，導(dǎo)致了e3無法在第二行成行，最終被換到了第三行。要解決這個(gè)問題我們只能根據(jù)BUG的行為來處理，也就是如果要讓float元素和非float元素保持在同一行，就必須把float元素放在前面，非float放在后面。無論是左浮動(dòng)還是右浮動(dòng)都是一樣的。 現(xiàn)在再回頭來看Chrome下的行為，由于e3是左浮動(dòng)，所以跑到了e2的左邊。也就是說，它是穿過了e2才跑到左邊的。這就可以看出，flaot元素是可以穿過行元素的，但前提是float元素和被穿過的行元素的寬度總和要在一行之內(nèi)。上面這個(gè)例子e3能穿過e2是因?yàn)閑2和e3的寬度總和沒超過行的寬度，也就是說他們放在同一行不會(huì)溢出來。如果我們把e2的寬度改成60%呢？ .e2 {background:#9E9;width:60%;}
60%+50%顯然超過了100%，于是e3就無法再穿越e2了。因?yàn)閑2就是第二行的，它不會(huì)因?yàn)楦?dòng)元素而被擠到其它行?；蛘呖梢悦枋鰹椤案?dòng)元素會(huì)盡可能的插入它前面的行，但是不可能把前面行本身的行元素?cái)D出去?！?
這個(gè)代碼中，e3并沒有跑到第二行。因?yàn)閑2是塊元素，即使內(nèi)容沒有那么多，但是它的靈魂已經(jīng)把整行都給占了。這時(shí)候float的e3就不會(huì)跑到第二行上，這就體現(xiàn)出了float的一個(gè)性質(zhì)“float元素不會(huì)浮動(dòng)到已經(jīng)被占滿的行上”?，F(xiàn)在我們修改一下代碼再做個(gè)測試。STYLE部分不變，只改后面的實(shí)體元素部分，把e3的float，放到e2上。 <div class="panel"> <div class="e1"></div> <div class="e2" style="float:left;"></div> <div class="e3"></div> </div>
這樣設(shè)置，e3就會(huì)跑到第二行上來了。不過這個(gè)代碼在IE6、7下有個(gè)BUG（右邊是IE7）。正常的浮動(dòng)元素應(yīng)該是和普通元素不在同一個(gè)深度的，所以在e3跑到第二行之后的效果應(yīng)該是像左邊的Chrome這樣e2和e3重疊的。具體在IE6、7中是什么BUG這篇文章就不說了，現(xiàn)在只要知道有這個(gè)BUG，避開它就行了。如何避開呢？我們給e3也加上float就行 <div class="panel"> <div class="e1"></div> <div class="e2" style="float:left;"></div> <div class="e3" style="float:left;"></div> </div>
float元素和普通元素重疊的效果顯然不是我們想要的，如果要重疊會(huì)用絕對(duì)定位來做，一般不會(huì)用float。所以，我們需要的是讓他們不重疊，因此給e3也加上float，讓e2和e3在同一個(gè)深度上，這樣就不會(huì)重疊了。同時(shí)也解決了低版本瀏覽器的兼容性問題。對(duì)于塊元素，flaot的影響大概就是這些。接著咱來看行元素的情況。 <!DOCTYPE html> <style> .panel {width:200px;height:100px;background:#EEE;font-size:0px;} .panel span {height:20px;display:inline-block;vertical-align:top;} .e1 {background:#E99;width:100%;} .e2 {background:#9E9;width:40%;} .e3 {background:#99E;width:50%;} </style> <div class="panel"> <span class="e1"></span> <span class="e2" style="float:left;"></span> <span class="e3"></span> </div>
和塊元素的情況不同，行元素沒有那個(gè)BUG。這就可以看出浮動(dòng)元素的另一個(gè)性質(zhì)“浮動(dòng)元素永遠(yuǎn)不會(huì)和行元素重疊”。行元素不會(huì)和塊元素重疊，也不會(huì)和浮動(dòng)元素重疊。我們在使用float布局時(shí)清除浮動(dòng)使容器保持高度就是使用了float的這個(gè)性質(zhì)。它類似助溶劑的作用，讓塊元素和浮動(dòng)元素更好的結(jié)合。不過行元素和float一起使用時(shí)在低版本瀏覽器中也有BUG，接著看代碼 <!DOCTYPE html> <style> .panel {width:200px;height:100px;background:#EEE;font-size:0px;} .panel span {height:20px;display:inline-block;vertical-align:top;} .e1 {background:#E99;width:100%;} .e2 {background:#9E9;width:40%;} .e3 {background:#99E;width:50%;} </style> <div class="panel"> <span class="e1"></span> <span class="e2"></span> <span class="e3" style="float:left;"></span> </div>
我們把e2的浮動(dòng)換到e3上，正常的邏輯應(yīng)該是像Chrome這樣e3跑到e2的左邊（左浮動(dòng)）。這也是一個(gè)float的性質(zhì)，這比較復(fù)雜，待會(huì)兒再說?？碔E的行為顯然很詭異，這就是IE6、7上的另一個(gè)BUG。這個(gè)BUG和上面的那個(gè)不太一樣，因?yàn)樗蝗菀捉鉀Q。這個(gè)BUG的行為是“在IE7-下，一行中如果有浮動(dòng)元素，那么所有的浮動(dòng)元素都必須在非浮動(dòng)元素之前”，例子中的e2是非浮動(dòng)元素，由于它不在e3這個(gè)浮動(dòng)元素之前，導(dǎo)致了e3無法在第二行成行，最終被換到了第三行。要解決這個(gè)問題我們只能根據(jù)BUG的行為來處理，也就是如果要讓float元素和非float元素保持在同一行，就必須把float元素放在前面，非float放在后面。無論是左浮動(dòng)還是右浮動(dòng)都是一樣的。 現(xiàn)在再回頭來看Chrome下的行為，由于e3是左浮動(dòng)，所以跑到了e2的左邊。也就是說，它是穿過了e2才跑到左邊的。這就可以看出，flaot元素是可以穿過行元素的，但前提是float元素和被穿過的行元素的寬度總和要在一行之內(nèi)。上面這個(gè)例子e3能穿過e2是因?yàn)閑2和e3的寬度總和沒超過行的寬度，也就是說他們放在同一行不會(huì)溢出來。如果我們把e2的寬度改成60%呢？ .e2 {background:#9E9;width:60%;}
60%+50%顯然超過了100%，于是e3就無法再穿越e2了。因?yàn)閑2就是第二行的，它不會(huì)因?yàn)楦?dòng)元素而被擠到其它行?；蛘呖梢悦枋鰹椤案?dòng)元素會(huì)盡可能的插入它前面的行，但是不可能把前面行本身的行元素?cái)D出去?！?
網(wǎng)站標(biāo)題：float在各瀏覽器下效果不同
網(wǎng)站路徑：http://www.rwnh.cn/news2/310902.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計(jì)公司、營銷型網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、自適應(yīng)網(wǎng)站、電子商務(wù)、商城網(wǎng)站
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- 高端網(wǎng)站建設(shè)要了解什么？從哪些方面？ 2023-12-29
- 網(wǎng)站關(guān)鍵詞對(duì)網(wǎng)站優(yōu)化的重要程度 2023-12-29
- 淺談低齡創(chuàng)業(yè)化成為常態(tài) 2023-12-29
- 在網(wǎng)站建設(shè)中提升網(wǎng)站實(shí)用性的幾個(gè)方法 2023-12-29
- 天津網(wǎng)站建設(shè)必須注意這幾點(diǎn)，可以提高網(wǎng)站流量(天津模板網(wǎng)站建設(shè)服務(wù)) 2023-12-28
- 游戲預(yù)約頁面網(wǎng)站的建設(shè)和開發(fā)有哪些基本步驟？ 2023-12-28
- 什么是共享主機(jī)和域名？為什么要在您的托管計(jì)劃中設(shè)置多個(gè)域名？ 2023-12-28
- 成都網(wǎng)站建設(shè)--門戶網(wǎng)站建設(shè)要點(diǎn) 2023-12-29
- emoji合成器制作網(wǎng)站(emojI合成器) 2023-12-29
- 企業(yè)網(wǎng)站如何“私人訂制” 2023-12-29
- 成都餐廳和婚禮的網(wǎng)站設(shè)計(jì)服務(wù) 2023-12-29
- 自助建站平臺(tái)何其多自帶何種特質(zhì)才能脫穎而出？ 2023-12-28
- 個(gè)人設(shè)計(jì)制作電商網(wǎng)站多少錢 2023-12-28
- 六種常見的企業(yè)網(wǎng)站首頁設(shè)計(jì)的布局方式 2023-12-28
- 成都400電話申請(qǐng)，400電話如何計(jì)費(fèi) 2023-12-28
- 盤點(diǎn)網(wǎng)站seo之優(yōu)化必備技巧！ 2023-12-28
- 成都企業(yè)網(wǎng)站定制服務(wù)包含哪些內(nèi)容 2023-12-28
- 網(wǎng)頁藝術(shù)設(shè)計(jì)初步探討 2023-12-28
- 網(wǎng)站seoCDN加速是什么意思？ 2023-12-28