float在各瀏覽器下效果不同

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

從最初的CSS開始就有float這東西了，雖然大家都一直在用，也沒出現(xiàn)什么大不了的問題。但是float它到底對元素做了什么呢？如果突然要說float的具體行為也未必能說的出來，只是會用而已，不代表了解它。所以咱就來摸摸這個float的底，看看它有多少斤兩。 現(xiàn)在的float，運用最廣的就是用來做布局。當(dāng)年傳的沸沸揚揚的所謂“DIV+CSS”布局實際上就是float布局。如果把容器內(nèi)所有元素都float了，確實很容易操作。唯一要解決的就是容器高度問題，這個在之前的文章“float布局的幾個常見問題解決”中已經(jīng)說過了。 但是float這個玩意兒出現(xiàn)的初衷不是用來給你布局的，而是讓文章中的圖片做文字環(huán)繞的?；蛘哒f，并不是一個容器能所有的元素都是float。它有可能和普通的行元素或塊元素一起被放在容器中，這時候float的行為就沒布局時那么簡單了。這里的定義是，塊元素是沒有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>

這個代碼中，e3并沒有跑到第二行。因為e2是塊元素，即使內(nèi)容沒有那么多，但是它的靈魂已經(jīng)把整行都給占了。這時候float的e3就不會跑到第二行上，這就體現(xiàn)出了float的一個性質(zhì)“float元素不會浮動到已經(jīng)被占滿的行上”。現(xiàn)在我們修改一下代碼再做個測試。STYLE部分不變，只改后面的實體元素部分，把e3的float，放到e2上。 <div class="panel"> <div class="e1"></div> <div class="e2" style="float:left;"></div> <div class="e3"></div> </div>

這樣設(shè)置，e3就會跑到第二行上來了。不過這個代碼在IE6、7下有個BUG（右邊是IE7）。正常的浮動元素應(yīng)該是和普通元素不在同一個深度的，所以在e3跑到第二行之后的效果應(yīng)該是像左邊的Chrome這樣e2和e3重疊的。具體在IE6、7中是什么BUG這篇文章就不說了，現(xiàn)在只要知道有這個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在同一個深度上，這樣就不會重疊了。同時也解決了低版本瀏覽器的兼容性問題。對于塊元素，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>

和塊元素的情況不同，行元素沒有那個BUG。這就可以看出浮動元素的另一個性質(zhì)“浮動元素永遠不會和行元素重疊”。行元素不會和塊元素重疊，也不會和浮動元素重疊。我們在使用float布局時清除浮動使容器保持高度就是使用了float的這個性質(zhì)。它類似助溶劑的作用，讓塊元素和浮動元素更好的結(jié)合。不過行元素和float一起使用時在低版本瀏覽器中也有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的左邊（左浮動）。這也是一個float的性質(zhì)，這比較復(fù)雜，待會兒再說?？碔E的行為顯然很詭異，這就是IE6、7上的另一個BUG。這個BUG和上面的那個不太一樣，因為它不容易解決。這個BUG的行為是“在IE7-下，一行中如果有浮動元素，那么所有的浮動元素都必須在非浮動元素之前”，例子中的e2是非浮動元素，由于它不在e3這個浮動元素之前，導(dǎo)致了e3無法在第二行成行，最終被換到了第三行。要解決這個問題我們只能根據(jù)BUG的行為來處理，也就是如果要讓float元素和非float元素保持在同一行，就必須把float元素放在前面，非float放在后面。無論是左浮動還是右浮動都是一樣的。 現(xiàn)在再回頭來看Chrome下的行為，由于e3是左浮動，所以跑到了e2的左邊。也就是說，它是穿過了e2才跑到左邊的。這就可以看出，flaot元素是可以穿過行元素的，但前提是float元素和被穿過的行元素的寬度總和要在一行之內(nèi)。上面這個例子e3能穿過e2是因為e2和e3的寬度總和沒超過行的寬度，也就是說他們放在同一行不會溢出來。如果我們把e2的寬度改成60%呢？ .e2 {background:#9E9;width:60%;}

60%+50%顯然超過了100%，于是e3就無法再穿越e2了。因為e2就是第二行的，它不會因為浮動元素而被擠到其它行?；蛘呖梢悦枋鰹椤案釉貢M可能的插入它前面的行，但是不可能把前面行本身的行元素擠出去?！?

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

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

廣告

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

h5響應(yīng)式網(wǎng)站建設(shè)