清除浮動這個問題，做前端的應該再熟悉不過了，咱是個新人，所以還是記個筆記，做個積累，努力學習向大神靠近。
CSS清除浮動的方法網上一搜，大概有N多種，用過幾種，說下個人感受。

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

1 2 3 4

.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 也一起浮動

?

1 2 3

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

這個方法我記得我是在學校的時候，看老外的CSS書時看到的，當時覺得很好用，但是現在覺得最好還是別用了，有時真的會很麻煩。
因為父級的元素一浮動，又會產生其他元素的浮動問題，不信你可以試試。
3、父級div定義 height
這個方法其實我還是蠻常用的，主要用在那些可以確定高度的元素上，感覺使用上很方便。但是那些需要自適應高度的就不適合了。

?

1 2 3

.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
這個方法也是我平時比較喜歡用的，感覺還挺好用的。
可以定義一個通用類選擇器，然后反復使用：

?

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

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

a:after{content:"aaa";}
<p><a href="#" target="_blank" target="_blank" target="_blank" target="_blank">AAA</a></p>
最后的顯示結果是AAAaaa

?

1 2 3 4 5

.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:""；}

轉載于:https://www.cnblogs.com/ranran/p/css_clear_float.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的活学活用，CSS清除浮动的4种方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。