我们在css+div布局学习(一)?div布局基础这篇文章里面讲解了基本的布局方法,footer内有clear:both;属性就一句带过了,事后想了一下对于清理还是有些话要讲清楚的。那我就开辟一篇专门讲一下。
还是使用上一篇的布局事例来说明问题更加的简单:
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左面的,因为没有被清理!)
一、源码描述这是一款比较简单的企业管理系统源码,界面美观大方,功能简单,特别适合初学者学习研究,系统运行十分流畅,可以作为二次开发,同时也是可以帮助初学者增长知识的优秀代码。二、功能介绍主要功能:企业动态,产品介绍 ,免费下载,定制服务,该源码比较适合新手学习和二次开发使用。三、源码特点1、网站布局:采用目前最先进的布局方式DIV+CSS,符合W3C的标准和Web2.0的风格。2、程序设计模块化,
立即学习“前端免费学习笔记(深入)”;
Clear属性有4个值:left、right、both和none;none这个值没有什么好说的,我们一开始清理了Footer的两边,那清理一边会有怎么样的效果呢?
Masthead
Sidebar_a
Sidebar_b
Content
Footer:使用CLEAR:left;属性哦!
有了这几张的效果图,应该很好理解这个属性了。在有两个边栏的情况下,Footer使用Clear:both;是比较稳妥的。










