Css+Div布局学习(二)—清理Clear
来源:互联网 发布:录制电脑屏幕的软件 编辑:程序博客网 时间:2024/06/06 02:32
我们在Css+Div布局学习(一)—Div布局基础这篇文章里面讲解了基本的布局方法,Footer内有clear:both;属性就一句带过了,事后想了一下对于清理还是有些话要讲清楚的。那我就开辟一篇专门讲一下。
还是使用上一篇的布局事例来说明问题更加的简单:
Masthead
Sidebar_a
Sidebar_b
Content
这个布局的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
这个布局不好看啊,因为foot这个块跟在Content块的流后面,因此两边的浮动块也会被它包围。(我现在的话也应该是“围绕”在Sidebar_b左面的,因为没有被清理!)
Clear属性有4个值:left、right、both和none;none这个值没有什么好说的,我们一开始清理了Footer的两边,那清理一边会有怎么样的效果呢?
Masthead
Sidebar_a
Sidebar_b
Content
有了这几张的效果图,应该很好理解这个属性了。在有两个边栏的情况下,Footer使用Clear:both;是比较稳妥的。
- Css+Div布局学习(二)—清理Clear
- DIV+CSS布局入门示例(五)border和clear
- DIV+CSS布局入门示例(五)border和clear
- Css+Div布局学习(一)—Div布局基础
- CSS之Div+Css布局(二)
- WEB标准布局(DIV+CSS)学习笔记(二)-- DIV的布局基础
- DIV+CSS布局二
- Div+CSS布局入门教程(二)
- Div+CSS布局入门教程(二)
- Css+Div布局学习
- DIV+CSS布局学习
- Div+CSS布局入门教程--页面制作-用好border和clear
- Div+CSS布局入门教程(二)
- Div+CSS布局入门教程(二)
- Div+CSS布局入门教程(二)
- Div+CSS布局入门教程(二)
- Css+Div布局学习(三)—定位Position
- Css+Div布局学习(四)—关于hack
- Web Browser-the new platform
- Linux下JDK1.6的bin文件安装方法
- SQL Injection攻击检测工具
- 十一种珍惜生命的态度
- Css+Div布局学习(一)—Div布局基础
- Css+Div布局学习(二)—清理Clear
- Css+Div布局学习(三)—定位Position
- Css+Div布局学习(四)—关于hack
- CSS_淘宝页面上一些圆角的做法
- winsock IO 模型的笔记
- 解决There is no READABLE property named 'SID'问题
- 工作组模式下设置文件共享_我的技术论文_IT网络
- Css+Div布局学习(五)—overflow
- TCP/IP协议:TCP与UDP的理解