clearfix清除浮動的方法有哪些

發布時間：2022-03-23 14:21:36 來源：億速云閱讀：112 作者：iii 欄目：web開發

今天小編給大家分享一下clearfix清除浮動的方法有哪些的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

　　clearfix清除浮動分為兩種：

　　清除自身浮動

　　清除父級浮動

　　一、為什么要清除浮動

　　一個塊級元素的高度如果沒有設置height，那么其高度就是由里面的子元素來撐開的，如果子元素使用浮動，脫離了標準的文檔流，那么父元素的高度會將其忽略，你可以使用firebug查看下如果不清除浮動，父元素會出現高度不夠，那樣如果設置border或者background都得不到正確的解析。

　　簡潔清除浮動

　　clearfix1:before,.clearfix1:after{content:"";display:table;}

　　.clearfix1:after{clear:both;overflow:hidden;}

　　.clearfix1{zoom:1;}

　　經典清除浮動：

　　.clearfix2:after{visibility:hidden;display:block;font-size:0;content:"";

　　clear:both;height:0;}*html

　　.clearfix2{zoom:1;}/*IE6*/*:first-child+html.clearfix2{zoom:1;}/*IE7*/

　　overflow清除浮動：

　　/*overflow:auto*/#demo3{overflow:auto;*zoom:1;}/*或overflow:hidden*/#demo4{overflow:hidden;*zoom:1;}

　　inline-block方式

　　#demo5{display:inline-block;*display:inline;*zoom:1;}

　　這個方法和上面的其它方法會有點差異，主要是inline-block造成的。

以上就是“clearfix清除浮動的方法有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。

向AI問一下細節

91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本