float在各瀏覽器下效果不同

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

從最初的CSS開(kāi)始就有float這東西了，雖然大家都一直在用，也沒(méi)出現(xiàn)什么大不了的問(wèn)題。但是float它到底對(duì)元素做了什么呢？如果突然要說(shuō)float的具體行為也未必能說(shuō)的出來(lái)，只是會(huì)用而已，不代表了解它。所以咱就來(lái)摸摸這個(gè)float的底，看看它有多少斤兩。現(xiàn)在的float，運(yùn)用最廣的就是用來(lái)做布局。當(dāng)年傳的沸沸揚(yáng)揚(yáng)的所謂“DIV+CSS”布局實(shí)際上就是float布局。如果把容器內(nèi)所有元素都float了，確實(shí)很容易操作。唯一要解決的就是容器高度問(wèn)題，這個(gè)在之前的文章“float布局的幾個(gè)常見(jiàn)問(wèn)題解決”中已經(jīng)說(shuō)過(guò)了。但是float這個(gè)玩意兒出現(xiàn)的初衷不是用來(lái)給你布局的，而是讓文章中的圖片做文字環(huán)繞的。或者說(shuō)，并不是一個(gè)容器能所有的元素都是float。它有可能和普通的行元素或塊元素一起被放在容器中，這時(shí)候float的行為就沒(méi)布局時(shí)那么簡(jiǎn)單了。這里的定義是，塊元素是沒(méi)有inline性質(zhì)的元素，行元素是具有inline性質(zhì)的元素。具體可以看“inline和block的基本性質(zhì)”。現(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并沒(méi)有跑到第二行。因?yàn)閑2是塊元素，即使內(nèi)容沒(méi)有那么多，但是它的靈魂已經(jīng)把整行都給占了。這時(shí)候float的e3就不會(huì)跑到第二行上，這就體現(xiàn)出了float的一個(gè)性質(zhì)“float元素不會(huì)浮動(dòng)到已經(jīng)被占滿(mǎn)的行上”。現(xiàn)在我們修改一下代碼再做個(gè)測(cè)試。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ì)跑到第二行上來(lái)了。不過(guò)這個(gè)代碼在IE6、7下有個(gè)BUG（右邊是IE7）。正常的浮動(dòng)元素應(yīng)該是和普通元素不在同一個(gè)深度的，所以在e3跑到第二行之后的效果應(yīng)該是像左邊的Chrome這樣e2和e3重疊的。具體在IE6、7中是什么BUG這篇文章就不說(shuō)了，現(xiàn)在只要知道有這個(gè)BUG，避開(kāi)它就行了。如何避開(kāi)呢？我們給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ì)定位來(lái)做，一般不會(huì)用float。所以，我們需要的是讓他們不重疊，因此給e3也加上float，讓e2和e3在同一個(gè)深度上，這樣就不會(huì)重疊了。同時(shí)也解決了低版本瀏覽器的兼容性問(wèn)題。對(duì)于塊元素，flaot的影響大概就是這些。接著咱來(lái)看行元素的情況。 <!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>

和塊元素的情況不同，行元素沒(méi)有那個(gè)BUG。這就可以看出浮動(dòng)元素的另一個(gè)性質(zhì)“浮動(dòng)元素永遠(yuǎn)不會(huì)和行元素重疊”。行元素不會(huì)和塊元素重疊，也不會(huì)和浮動(dòng)元素重疊。我們?cè)谑褂胒loat布局時(shí)清除浮動(dòng)使容器保持高度就是使用了float的這個(gè)性質(zhì)。它類(lèi)似助溶劑的作用，讓塊元素和浮動(dòng)元素更好的結(jié)合。不過(guò)行元素和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ì)兒再說(shuō)。看IE的行為顯然很詭異，這就是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無(wú)法在第二行成行，最終被換到了第三行。要解決這個(gè)問(wèn)題我們只能根據(jù)BUG的行為來(lái)處理，也就是如果要讓float元素和非float元素保持在同一行，就必須把float元素放在前面，非float放在后面。無(wú)論是左浮動(dòng)還是右浮動(dòng)都是一樣的。現(xiàn)在再回頭來(lái)看Chrome下的行為，由于e3是左浮動(dòng)，所以跑到了e2的左邊。也就是說(shuō)，它是穿過(guò)了e2才跑到左邊的。這就可以看出，flaot元素是可以穿過(guò)行元素的，但前提是float元素和被穿過(guò)的行元素的寬度總和要在一行之內(nèi)。上面這個(gè)例子e3能穿過(guò)e2是因?yàn)閑2和e3的寬度總和沒(méi)超過(guò)行的寬度，也就是說(shuō)他們放在同一行不會(huì)溢出來(lái)。如果我們把e2的寬度改成60%呢？ .e2 {background:#9E9;width:60%;}

60%+50%顯然超過(guò)了100%，于是e3就無(wú)法再穿越e2了。因?yàn)閑2就是第二行的，它不會(huì)因?yàn)楦?dòng)元素而被擠到其它行?；蛘呖梢悦枋鰹椤案?dòng)元素會(huì)盡可能的插入它前面的行，但是不可能把前面行本身的行元素?cái)D出去。”

網(wǎng)站標(biāo)題：float在各瀏覽器下效果不同
網(wǎng)站路徑：http://redsoil1982.com.cn/news2/310902.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁(yè)設(shè)計(jì)公司、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、自適應(yīng)網(wǎng)站、電子商務(wù)、商城網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

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