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

防城網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),防城網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為防城超過千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)營銷網(wǎng)站建設(shè)要多少錢，請找那個售后服務(wù)好的防城做網(wǎng)站的公司定做！

clearfix清除浮動分為兩種：

清除自身浮動

清除父級浮動

一、為什么要清除浮動

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

簡潔清除浮動

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

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

.clearfix1{zoom:1;}

經(jīng)典清除浮動：

.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;}

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

以上就是“clearfix清除浮動的方法有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。