Css+Div布局学习（二）?清理Clear_html/css_WEB-ITnose

还是使用上一篇的布局事例来说明问题更加的简单：

Masthead

Sidebar_a

Sidebar_b

Content

Footer

这个布局的Css复习一下：

#Masthead { background-color:#CCCCCC; margin-bottom:10px; } #Sidebar_a { float:left; width:25%; margin-bottom:10px; background-color:#3399CC; } #Sidebar_b { float:right; width:25%; margin-bottom:10px; background-color:#33ff33; } #Content { margin-bottom:10px; height:150px; background-color:#ff3366; } #Footer { clear:both; background-color:#ffff00; }

如果我们去掉#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;是比较稳妥的。