清除浮動這個問題，做前端的應該再熟悉不過了，咱是個新人，所以還是記個筆記，做個積累，努力學習向大神靠近。
CSS清除浮動的方法網上一搜，大概有N多種，用過幾種，說下個人感受。
1、結尾處加空div標籤 clear:both.div1{background:#000080;border:1pxsolidred；}
.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:1pxsolidred;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
這個方法其實我還是蠻常用的，主要用在那些可以確定高度的元素上，感覺使用上很方便。但是那些需要自適應高度的就不適合了。
.div1{background:#000080;border:1pxsolidred；height:200px;}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}4、父級div定義 僞類:after 和 zoom
這個方法也是我平時比較喜歡用的，感覺還挺好用的。
可以定義一個通用類選擇器，然後反覆使用：
.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
.div1{background:#000080;border:1pxsolidred;}
.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:""；}