float在各瀏覽器下效果不同

2023-12-29 分類：網(wǎng)站建設(shè)

從最初的CSS開始就有float這東西了，雖然大家都一直在用，也沒出現(xiàn)什么大不了的問題。但是float它到底對元素做了什么呢？如果突然要說float的具體行為也未必能說的出來，只是會用而已，不代表了解它。所以咱就來摸摸這個(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)繞的?；蛘哒f，并不是一個(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就不會跑到第二行上，這就體現(xiàn)出了float的一個(gè)性質(zhì)“float元素不會浮動到已經(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就會跑到第二行上來了。不過這個(gè)代碼在IE6、7下有個(gè)BUG（右邊是IE7）。正常的浮動元素應(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元素和普通元素重疊的效果顯然不是我們想要的，如果要重疊會用絕對定位來做，一般不會用float。所以，我們需要的是讓他們不重疊，因此給e3也加上float，讓e2和e3在同一個(gè)深度上，這樣就不會重疊了。同時(shí)也解決了低版本瀏覽器的兼容性問題。對于塊元素，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。這就可以看出浮動元素的另一個(gè)性質(zhì)“浮動元素永遠(yuǎn)不會和行元素重疊”。行元素不會和塊元素重疊，也不會和浮動元素重疊。我們在使用float布局時(shí)清除浮動使容器保持高度就是使用了float的這個(gè)性質(zhì)。它類似助溶劑的作用，讓塊元素和浮動元素更好的結(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的浮動換到e3上，正常的邏輯應(yīng)該是像Chrome這樣e3跑到e2的左邊（左浮動）。這也是一個(gè)float的性質(zhì)，這比較復(fù)雜，待會兒再說。看IE的行為顯然很詭異，這就是IE6、7上的另一個(gè)BUG。這個(gè)BUG和上面的那個(gè)不太一樣，因?yàn)樗蝗菀捉鉀Q。這個(gè)BUG的行為是“在IE7-下，一行中如果有浮動元素，那么所有的浮動元素都必須在非浮動元素之前”，例子中的e2是非浮動元素，由于它不在e3這個(gè)浮動元素之前，導(dǎo)致了e3無法在第二行成行，最終被換到了第三行。要解決這個(gè)問題我們只能根據(jù)BUG的行為來處理，也就是如果要讓float元素和非float元素保持在同一行，就必須把float元素放在前面，非float放在后面。無論是左浮動還是右浮動都是一樣的。現(xiàn)在再回頭來看Chrome下的行為，由于e3是左浮動，所以跑到了e2的左邊。也就是說，它是穿過了e2才跑到左邊的。這就可以看出，flaot元素是可以穿過行元素的，但前提是float元素和被穿過的行元素的寬度總和要在一行之內(nèi)。上面這個(gè)例子e3能穿過e2是因?yàn)閑2和e3的寬度總和沒超過行的寬度，也就是說他們放在同一行不會溢出來。如果我們把e2的寬度改成60%呢？ .e2 {background:#9E9;width:60%;}

60%+50%顯然超過了100%，于是e3就無法再穿越e2了。因?yàn)閑2就是第二行的，它不會因?yàn)楦釉囟粩D到其它行。或者可以描述為“浮動元素會盡可能的插入它前面的行，但是不可能把前面行本身的行元素?cái)D出去?！?

網(wǎng)站標(biāo)題：float在各瀏覽器下效果不同
網(wǎng)站路徑：http://m.kartarina.com/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)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容