DIV CSS 佈局教程網

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



1、結尾處加空div標簽 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}

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

.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
這個方法也是我平時比較喜歡用的，感覺還挺好用的。

可以定義一個通用類選擇器，然後反復使用：

.clear{zoom:1}

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

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

a:after{content:"aaa";}
<p><a href="#" target="_blank">AAA</a></p>
最後的顯示結果是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:"";}