这一节里面，主要就是想告诉大家如何使用好border和clear这两个属性。
首先，如果你曾用过table制作网页，你就应该知道，如果要在表格中绘制一条虚线该如何做，那需要制作一个很小的图片来填充，其实我们还有更简单的办法，只要在中加入这么一段就可以了，你可以试试：
大家可以再次参考手册，然后你就能明白dashed、solid、dotted...等的作用，利用它们你可以制作出许多效果来，实线、虚线、双线、阴影线等等。
以上代码便可以实现设计草图中的banner，在css.css中加入以下样式：
#banner {
background:url(banner.jpg) 0 30px no-repeat; /*加入背景图片*/
width:730px; /*设定层的宽度*/
margin:auto; /*层居中*/
height:240px; /*设定高度*/
border-bottom:5px solid #EFEFEF; /*画一条浅灰色实线*/
clear:both /*清除浮动*/
}
通过border很容易就绘制出一条实线了，并且减少了图片下载所占用的网络资源，使得页面载入速度变得更快。
另一个要说明的就是clear:both，表示清除左、右所有的浮动，在接下来的布局中我们还会用这个属性：clear:left/right。在这里添加clear:both是由于之前的ul、li元素设置了浮动，如果不清除则会影响banner层位置的设定。
以上是页面主体部分，我们在css.css中添加以下样式：
#pagebody {
width:730px; /*设定宽度*/
margin:8px auto; /*居中*/
}
#sidebar {
width:160px; /*设定宽度*/
text-align:left; /*文字左对齐*/
float:left; /*浮动居左*/
clear:left; /*不允许左侧存在浮动*/
overflow:hidden; /*超出宽度部分隐藏*/
}
#mainbody {
width:570px;
text-align:left;
float:right; /*浮动居右*/
clear:right; /*不允许右侧存在浮动*/
overflow:hidden
}
为了可以查看到效果，建议在#sidebar和#mainbody中加入以下代码，预览完成后可以删除这段代码：
border:1px solid #E00;
height:200px
保存预览效果，可以发现这两个层完美的浮动，在达到了我们布局的要求，而两个层的实际宽度应该160+2(border)+570+2=734px，已经超出了父层的宽度，由于clear的原因，这两个层才不会出现错位的情况，这样可以使我们布局的页面不会因为内容太长（例如图片）而导致错位。
而之后添加的overflow:hidden则可以使内容太长（例如图片）的部份自动被隐藏。通常我们会看到一些网页在载入时，由于图片太大，导致布局被撑开，直到页面下载完成才恢复正常，通过添加overflow:hidden就可以解决这个问题。
CSS中每一个属性运用得当，就可以解决许多问题，或许它们与你在布局的页并没有太大的关系，但是你必须知道这些属性的作用，在遇到难题的时候，可以尝试使用这些属性去解决问题。
分享到：
相关推荐
Div+CSS布局入门教程+构思图+源码 第 1 页 页面布局与规划 第 2 页 写入整体层结构与CSS 第 3 页 页面顶部制作之一 第 4 页 页面顶部制作之二 第 5 页 页面制作-用好border和clear
如果想学好Div+CSS布局就下这个资源 诚信可靠 Div+CSS布局入门教程资源.rar Div+CSS布局入门教程.doc Div + Css 布局示例 .rar(现成的例子n+1种) 使用面向对象的技术创建高级Web...5页面制作-用好border和clear.doc
在网页设计领域，Div+CSS布局是一种常见的网页布局方式，它通过使用HTML的<div>标签配合CSS（Cascading Style Sheets）样式表来控制页面元素的样式和布局。Div+CSS布局的优势在于分离了内容与表现，使得网页设计更加...
初学者需要掌握Div元素的使用，理解CSS的选择器、属性和盒模型，以及浮动和定位等概念，才能逐步熟练应用Div+CSS进行网页布局。随着经验的积累，还可以探索更高级的布局技术，如Flexbox和Grid，以适应现代网页设计的...
《Div+CSS布局实例源码》是一份专为学习和精通Div+CSS布局技术而设计的资源包。这个包包含了丰富的实例，旨在帮助初学者和有一定基础的学习者深入理解和掌握网页布局的核心技巧。Div+CSS是现代网页设计的基础，通过...
1. **基本布局**：使用Div实现网格系统，例如两栏或三栏布局，展示如何通过CSS浮动（float）和清除（clear）控制元素的位置。 2. **定位**：通过CSS的position属性（static、relative、absolute、fixed）来精确控制...
在CSS中，我们可以通过设置`div`的样式属性，如宽度（width）、高度（height）、内边距（padding）、外边距（margin）以及定位（positioning），来调整其在页面上的位置和大小，进而实现复杂的布局结构。 在提供的...
在网页设计领域，Div+CSS布局是一种广泛应用的技术，它能够帮助开发者实现清晰、灵活且高效的页面布局。本资料将全面解析Div+CSS布局的核心概念和实战技巧，旨在提升设计师对网页布局的掌控能力。 一、Div与CSS基础...
【CSS和DIV布局基础】 CSS (Cascading Style Sheets) 是一种样式表语言，用于描述HTML或XML（包括如SVG、MathML等各种...通过实例练习，我们可以更好地理解如何使用CSS控制页面布局，从而创建出符合设计预期的网页。
这份压缩包包括了核心的学习资料——《DIV+CSS布局大全.pdf》，以及可能链接到更多学习资源的《分享家—数十万份试卷、资料、电子书下载.url》。 首先，我们要理解DIV+CSS布局的基础概念。在HTML中，`<div>`元素是...
【div+css入门教程】 网页布局是Web开发中的核心部分，而`div+css`是实现这一目标的主要技术。Div（层）是HTML中的一个通用容器元素，它用于组织页面内容，而CSS（层叠样式表）则用来控制这些元素的外观和布局。本...
`DIV+CSS`的核心在于布局管理，如浮动（`float`）、定位（`position`）和清除（`clear`）。学习者会学习如何使用这些技术创建复杂的网页布局，例如两列或三列布局。 第八天和第九天，教程可能涵盖响应式设计和移动...
《Div+CSS布局大全》是一本专注于Web前端开发领域的经典教程，主要针对使用Div和CSS进行网页布局的设计和实现。Div元素是HTML中一个非常重要的布局容器，而CSS（层叠样式表）则是用于控制网页元素外观和布局的核心...
【标题】"div+css系统布局样例"揭示了这个压缩包内容的核心——它是一个包含多样化的div+css布局示例的集合，旨在帮助开发者理解和掌握如何使用这些技术来构建系统的网页布局。div（division）是HTML中的一个块级...
### 精通div+css网页样式与网页布局 #### 一、基础知识介绍 ...通过以上介绍可以看出，**div+css**结合使用能够非常灵活地控制网页布局和样式。熟练掌握这些基本概念和技术点对于开发高质量、易维护的网页至关重要。
《Div+CSS 3.0网页布局案例精粹》是一本深入探讨网页设计技术的书籍，专注于使用Div和CSS 3.0进行高效、灵活且响应式的网页布局。Div是HTML中的一个容器元素，用于组织网页内容，而CSS 3.0则是层叠样式表的最新版本...
《Div+CSS从入门到精通》是一本专为初学者设计的Web前端开发教程，它深入浅出地讲解了如何使用Div和CSS进行网页布局与美化。Div元素是HTML中的一个区块级容器，常用于组织网页结构，而CSS（Cascading Style Sheets）...
这个文档主要讲关于网站div-css布局一些很使用的基本知识，主要有以下几个方面：一、页面布局与规划，二、写入整体层结构与CSS ，三、页面顶部制作之一，四、页面顶部制作之二，五、页面制作-用好border和clear ...