溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下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清除浮動的方法有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
