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

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

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

使用了float之后，父級盒子的高度變為0了。我們來寫一個例子來看一下，創建一個父級div，并設置border屬性，然后下邊創建兩個子元素span，并設置浮動。

具體代碼如下所示：

效果：

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

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

源代碼：

效果：

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

優點： 簡單、代碼少、瀏覽器支持好、不容易出現怪問題

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

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

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

源代碼：

效果：

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

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

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

3、父級div定義 overflow:hidden

源代碼：

效果：

優點： 簡單、代碼少、瀏覽器支持好

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

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

源代碼：

效果：

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

優點： 簡單、代碼少、容易掌握。

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

看完上述內容，你們對在css中有哪些清除浮動的方法有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。