基于CSS+DIV的float技术在网页制作中的应用摘要：本文主要描述基于CSS+DIV的float技术在文本环绕、页面布局和页面导航中的应用，对设置浮动元素产生的影响采用clear进行清除处理。Float技术不但对整个页面布局进行规划，也可以对一些基本元素如导航等进行排列，是网页制作中非常重要的方法。关键词：CSS+DIV；float；clear：TP391.41文献标识码：A1引言(Introduction)早期的网页采用进行排版，存在各种各样的问题，比如：升级困难、代码的修改和维护费时费力等。CSS+DIV是目前比较流行的网页布局技术，它使得内容和样式完全分离，在修改页面时不需要关心任何后台操作的问题，其中的float更是网页制作中不可缺少的部分［1-3］。可以将float值设置为left、right或者默认值none,设置浮动定位后，浮动的框向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。float取值为none则不会发生任何浮动，块元素独占一行，紧随其后的块元素将在新行中显示。2Float在文本环绕中的应用(Applicationoffloatinthetextaround)网页中经常能看到文字环绕图片的效果，通常把这种方式称“文本环绕”。在网页设计中，使用了CSS的float属性的页面元素就像在印刷布局里面被文本环绕的图片一样。浮动的本意是要将插入到文章中的图片向左或者向右浮动，使图片下方的文字自动环绕在它的周围，使图片的左边或者右边不会出现一大块的留白。文本环绕的html代码如下：得到的效果图如图1所示，可以看出文字并没有环绕图片，尽管图片右侧存在大块的空白，原因是是个块级元素。块级元素的特点是，独自占满整个一行，即使它的右侧有大块空白，在它之后的元素也只能显示在它的下面一行。如果想要将图片右侧的区域空出来，文字显示在图片右侧区域，则需要设置img{float:left;}，图片将向左侧浮动，直到碰到包含它的框为止，效果如2所示。从图2可以看出，虽然文字显示在了图片右侧，但是图片跑出了包含它的盒子。这是因为浮动的元素会脱离当前文档，就像页面中没有该元素一样，不占用页面空间，此时如果再添加内容，会显示在浮动图片的后面，被图片盖住，显然不是我们需要的效果。为了清除浮动图片造成的影响，在文字的下方添加空盒子，html代码如下：同时在样式中定义.clear{clear:left},因为对该盒子不设置宽、高等样式，也不放置任何内容，所以不占用任何空间，不影响布局，只起到一个清除的作用。清除之后的效果如图3所示。设置clear:left是清除左浮动造成的影响，right是清除右浮动造成的影响，清除最常用的是clear:both，清楚左右浮动造成的影响。3Float在网页布局中的应用（Applicationoffloatinthewebpagelayout）应用Web标准构建网页以后，float浮动属性是布局中非常重要的属性，我们常常通过对元素应用float浮动来进行布局。CSS+DIV布局就是将页面分成若干个块（盒子），想要在页面中呈现的内容都放入这些块中，通过CSS来控制页面中的内容在网页中呈现出来的样式。设置页面中的div盒子，html代码如下所示。使用CSS对盒子的宽、高、边框等属性进行了设置，得到结果如图4所示。当没有运用float属性时，sidebar块和main块分别占满一行，即使两个块的宽度加起来小于页面宽度，也没办法并列显示，原因是也是个块级元素。如果想main区域在sidebar区域的右侧排放，则需要将这两个盒子分别设置float:left，即sidebar块向左靠近包含它的盒子main块向左靠近sidebar块；也可以将sidebar块设置左浮动，main块设置为右浮动，即sidebar块向左靠近包含它的块，main块向右靠近包含它的块。如果想两个盒子左右颠倒放置，则需要将两个盒子分别设置为右浮动，即sidebar•块向右靠近包含它的盒子，然后main块向右靠近sidebar块。如图5所示，虽然sidebar块和main块并列排放，但是footer区域只显示了文字，盒子没有显示出来。这是因为，sidebar和main设定浮动之后，浮动的元素会脱离当前文档，就像页面中没有该元素一样，不占用页面空间，所以footer块会上移到header块的下部分。如果将footer区域的高度设置高于sidebar和main区域的高度，更容易看出来。为了清除这种影响需要在footer的样式中设置clear:left，此时的效...