在css中有哪些清除浮動的方法

今天就跟大家聊聊有關(guān)在css中有哪些清除浮動的方法，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、微信小程序開發(fā)、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了祁東免費建站歡迎大家使用！

css清除浮動的方法：1、在父標(biāo)簽結(jié)尾處，添加具有“clear:both”樣式的空div標(biāo)簽；2、父級div標(biāo)簽定義偽類“:after”和zoom屬性；3、父級div元素定義“overflow:hidden”樣式。

使用了float之后，父級盒子的高度變?yōu)?了。我們來寫一個例子來看一下，創(chuàng)建一個父級div，并設(shè)置border屬性，然后下邊創(chuàng)建兩個子元素span，并設(shè)置浮動。

具體代碼如下所示：

效果：

由上圖可以看出，在給span添加了float之后，父級元素div的高度就變成了0（紅色框）。我們有以下幾種方式來解決這個問題

1、在標(biāo)簽結(jié)尾處加空div標(biāo)簽 clear:both

源代碼：

效果：

原理：添加一個空div，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度。

優(yōu)點：簡單、代碼少、瀏覽器支持好、不容易出現(xiàn)怪問題

缺點：不少初學(xué)者不理解原理；如果頁面浮動布局多，就要增加很多空div，不利于頁面的優(yōu)化。

（學(xué)習(xí)視頻分享：css視頻教程）

2、父級div定義 偽類:after 和 zoom

源代碼：

效果：

原理：元素生成偽類的作用和效果相當(dāng)于方法2中的原理，但是IE8以上和非IE瀏覽器才支持:after，zoom(IE轉(zhuǎn)有屬性)可解決ie6,ie7浮動問題

優(yōu)點：瀏覽器支持好、不容易出現(xiàn)怪問題，寫法是固定的，不理解也可以直接復(fù)制使用；（小編大力推薦使用此種方法，簡單便捷，只需添加一個class即可解決問題）

缺點：css代碼多、不少初學(xué)者不理解原理，要兩句代碼結(jié)合使用才能讓主流瀏覽器都支持。

3、父級div定義 overflow:hidden

源代碼：

效果：

優(yōu)點：簡單、代碼少、瀏覽器支持好

缺點：不能和position配合使用，因為超出的尺寸的會被隱藏。（不建議使用此種方式，可能會影響頁面元素布局）

4、給父級元素單獨定義高度（height）

源代碼：

效果：

原理：如果父級元素沒有定義高度，父元素的高度完全由子元素撐開時，父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。

優(yōu)點：簡單、代碼少、容易掌握。

缺點：只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產(chǎn)生問題。對于響應(yīng)式布局會有很大影響。

看完上述內(nèi)容，你們對在css中有哪些清除浮動的方法有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

分享文章：在css中有哪些清除浮動的方法
標(biāo)題URL：http://muchs.cn/article24/jpgoje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機、軟件開發(fā)、靜態(tài)網(wǎng)站、網(wǎng)站策劃、網(wǎng)站設(shè)計公司、動態(tài)網(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)