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;是比较稳妥的。