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

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

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

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

具體代碼如下所示：

效果：

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

1、在標簽結尾處加空div標簽 clear:both

源代碼：

效果：

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

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

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

（學習視頻分享：css視頻教程）

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

源代碼：

效果：

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

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

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

3、父級div定義 overflow:hidden

源代碼：

效果：

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

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

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

源代碼：

效果：

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

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

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

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