SpringSide开发实战（三）：漫谈CSS和页面布局 - 编程入门网

下面是效果：

SpringSide开发实战（三）：漫谈CSS和页面布局(4)

可以看到一个有趣的现象，那就是虽然我们把div2移走了，但是div1和div3中间还是有 一个空间，说明相对定位的元素是会占据文档流空间的，这里的div2就是典型的“站着茅坑 不拉屎”。

使用绝对定位也是可以把div2摆到div1的右边的，而且绝对定位是不会占据文档流空间 的，如下图，div1和div3之间没有空白：

div2的CSS代码：

#div2 {}{ 　　 border: 1px solid #000099; 　　 height: 60px; 　　 width: 200px; 　　 margin:2px; 　　 position: absolute; 　　 top: 15px; 　　 left: 214px; }

绝对定位是个好东西，可以把内容显示到页面上的任何位置，但是对于我们程序员来说 ，却不能使用太多的绝对定位，因为使用程序动态向div中添加内容，div的大小是不可知的 ，无法将每一个div的位置都定死。

四、CSS中的浮动和清除模型

在CSS中，最让人不好理解的应该算是float和clear意义了。float可以达到这样一个效 果，就是本来应该一行一个的块元素，如果定义了float属性，则只要行的空间足够，它会 跑别的float元素的屁股后面，而不再会单独占用一行，如下图：

这里把div2和div3都定义了为浮动，代码如下：

#div2 {}{ 　　 border: 1px solid #000099; 　　 height: 60px; 　　 width: 200px; 　　 margin:2px; 　　 float:left; } #div3 {}{ 　　 border: 1px solid #000099; 　　 height: 60px; 　　 width: 200px; 　　 margin:2px; 　　 float:left; }

SpringSide开发实战（三）：漫谈CSS和页面布局(5)

那什么情况下需要clear呢？这是因为float的元素和绝对定位的元素一样，也是不占用 文档空间的，因此，如果我们把div2和div3都嵌套在div1中，并且把div2和div3都定义为浮 动，那么由于它们不占用文档空间，所以作为父元素的div1不知道自动扩展大小，以至于显 示出来div2和div3会跑到div1的外面，如下图：

下面是它们的html代码：

<div id="div1">div1 <div id="div2">div2</div> <div id="div3">div3</div> </div>下面是它们的css代码：

#div1 {}{ 　　 border: 1px solid #000099; 　　 height: 60px; 　　 width: 450px; 　　 margin:2px; } #div2 {}{ 　　 border: 1px solid #000099; 　　 height: 60px; 　　 width: 200px; 　　 margin:2px; 　　 float:left; } #div3 {}{ 　　 border: 1px solid #000099; 　　 height: 60px; 　　 width: 200px; 　　 margin:2px; 　　 float:left; }

因为float的元素不占用文档流空间，有时候被的元素还会重叠到float元素上，这里我 就不举例了。

为了解决上面的问题，就需要在float之后的元素上面使用clear，在此例中，我们在 div3后面加入一个空段落，并设置其为clear，如下：

<div id="div1">div1 <div id="div2">div2</div> <div id="div3">div3</div> <p class="clear"></p> </div>

下面是新增加的空段落的CSS代码：

.clear{}{ 　　 clear:left; }

效果图：

SpringSide开发实战（三）：漫谈CSS和页面布局(6)

还是以我的xkland项目为例，来设计一个完整的页面吧。下面是我的welcome.jsp页面的 布局图：

在这个页面中，我完全摆脱了“表格套表格”的模式，而且除了最上面一行在一个div里 面显示logo、advertisment和appendix的div外，其它的地方没

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!