這篇文章主要介紹“div清除浮動css樣式代碼分享”，在日常操作中，相信很多人在div清除浮動css樣式代碼分享問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”div清除浮動css樣式代碼分享”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

成都創(chuàng)新互聯(lián)公司2013年成立，先為卓資等服務(wù)建站，卓資等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為卓資企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

1、結(jié)尾處加空div標(biāo)簽 clear:both

代碼如下:

.div1{background:#000080;border:1px solid red；}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
.clear{clear:both}

這種方法，感覺之前大家用的比較多。但是無緣無故多出一個空的div,而且浮動越多就要不斷加div,讓我感覺很憂傷，所以我不太喜歡用。

2、父級div 也一起浮動

代碼如下:

.div1{background:#000080;border:1px solid red;width:98%;margin-bottom:10px;float:left；}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}

這個方法我記得我是在學(xué)校的時候，看老外的CSS書時看到的，當(dāng)時覺得很好用，但是現(xiàn)在覺得最好還是別用了，有時真的會很麻煩。
因為父級的元素一浮動，又會產(chǎn)生其他元素的浮動問題，不信你可以試試。

3、父級div定義 height

這個方法其實我還是蠻常用的，主要用在那些可以確定高度的元素上，感覺使用上很方便。但是那些需要自適應(yīng)高度的就不適合了。

代碼如下:

.div1{background:#000080;border:1px solid red；height:200px;}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}

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

這個方法也是我平時比較喜歡用的，感覺還挺好用的。

可以定義一個通用類選擇器，然后反復(fù)使用：

代碼如下:

.clear{zoom:1}
.clear:after{display:block;clear:both;content:"";}

剛用這個的時候，還不知道content屬性是干嘛的，后來查了下是這么解釋的：
content配合before和：after偽類一起使用，用于插入內(nèi)容。
小小舉個例子，簡單寫一下：

代碼如下:

a:after{content:"aaa";}

AAA

最后的顯示結(jié)果是AAAaaa

代碼如下:

.div1{background:#000080;border:1px solid red;}

.left{float:left;width:20%;height:200px;background:#DDD}

.right{float:right;width:30%;height:80px;background:#DDD}

.clear{zoom:1}

.clear:after{display:block;clear:both;content:"";}

到此，關(guān)于“div清除浮動css樣式代碼分享”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
本文名稱：div清除浮動css樣式代碼分享
標(biāo)題鏈接：http://weahome.cn/article/gojjhs.html