Css+Div佈局學習（二）—清理Clear

 

我們在Css+Div佈局學習（一）—Div佈局基礎 這篇文章裏面講解了基本的佈局方法，Footer內有clear:both;屬性就一句帶過了，事後想了一下對於清理還是有些話要講清楚的。那我就開闢一篇專門講一下。

還是使用上一篇的佈局事例來說明問題更加的簡單：

Masthead

Sidebar_a

Sidebar_b

Content

Footer

這個佈局的Css複習一下：

1. #Masthe ad 
2. { 
3. background-color : #CCCCCC ; 
4. margin-bottom : 10px ; 
5. } 
6. #Sideba r_a 
7. { 
8. float : left ; 
9. width : 25% ; 
10. margin-bottom : 10px ; 
11. background-color : #3399CC ; 
12. } 
13. #Sideba r_b 
14. { 
15. float : right ; 
16. width : 25% ; 
17. margin-bottom : 10px ; 
18. background-color : #33ff33 ; 
20. } 
21. #Conten t 
22. { 
23. margin-bottom : 10px ; 
24. height : 150px ; 
25. background-color : #ff3366 ; 
26. } 
27. #Footer  
28. { 
29. clear : both ; 
30. background-color : #ffff00 ; 
31. } 

如果我們去掉#Footer  裏面的 clear : both ; 屬性，好像也沒有太大的區別。那我們再來看看改變一下佈局內Div的高度後會怎麼樣呢？

Masthead

Sidebar_a

Sidebar_b

Content

Footer:去掉了CLEAR: both;屬性哦！

這個佈局不好看啊，因爲foot這個塊跟在Content塊的流後面，因此兩邊的浮動塊也會被它包圍。（我現在的話也應該是“圍繞”在Sidebar_b左面的，因爲沒有被清理！）

Clear屬性有4個值：left、right、both和none；none這個值沒有什麼好說的，我們一開始清理了Footer的兩邊，那清理一邊會有怎麼樣的效果呢？

Masthead

Sidebar_a

Sidebar_b

Content

Footer:使用CLEAR:left;屬性哦！

有了這幾張的效果圖，應該很好理解這個屬性了。在有兩個邊欄的情況下，Footer使用Clear:both;是比較穩妥的。