基于CSS+DIV的float技术在网页制作中的应用

摘 要：本文主要描述基于CSS+DIV的float技术在文本环绕、页面布局和页面导航中的应用，对设置浮动元素产生的影响采用clear进行清除处理。Float技术不但对整个页面布局进行规划，也可以对一些基本元素如导航等进行排列，是网页制作中非常重要的方法。

关键词：CSS+DIV；float；clear

中图分类号：TP391.41 文献标识码：A

1 引言（Introduction）

早期的网页采用进行排版，存在各种各样的问题，比如：升级困难、代码的修改和维护费时费力等。CSS+DIV是目前比较流行的网页布局技术，它使得内容和样式完全分离，在修改页面时不需要关心任何后台操作的问题，其中的float更是网页制作中不可缺少的部分[1-3]。

可以将float值设置为left、right或者默认值none，设置浮动定位后，浮动的框向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。float取值为none则不会发生任何浮动，块元素独占一行，紧随其后的块元素将在新行中显示。

2 Float在文本环绕中的应用（Application of float in

the text around）

网页中经常能看到文字环绕图片的效果，通常把这种方式称“文本环绕”。在网页设计中，使用了CSS的float属性的页面元素就像在印刷布局里面被文本环绕的图片一样。浮动的本意是要将插入到文章中的图片向左或者向右浮动，使图片下方的文字自动环绕在它的周围，使图片的左边或者右边不会出现一大块的留白。

文本环绕的html代码如下：

得到的效果图如图1所示，可以看出文字并没有环绕图片，尽管图片右侧存在大块的空白，原因是是个块级元素。块级元素的特点是，独自占满整个一行，即使它的右侧有大块空白，在它之后的元素也只能显示在它的下面一行。

如果想要将图片右侧的区域空出来，文字显示在图片右侧区域，则需要设置img{float：left；}，图片将向左侧浮动，直到碰到包含它的框为止，效果如图2所示。

从图2可以看出，虽然文字显示在了图片右侧，但是图片跑出了包含它的盒子。这是因为浮动的元素会脱离当前文档，就像页面中没有该元素一样，不占用页面空间，此时如果再添加内容，会显示在浮动图片的后面，被图片盖住，显然不是我们需要的效果。为了清除浮动图片造成的影响，在文字的下方添加空盒子，html代码如下：

同时在样式中定义.clear{clear：left}，因为对该盒子不设置宽、高等样式，也不放置任何内容，所以不占用任何空间，不影响布局，只起到一个清除的作用。清除之后的效果如图3所示。

设置clear：left是清除左浮动造成的影响，right是清除右浮动造成的影响，清除最常用的是clear：both，清楚左右浮动造成的影响。

3 Float在网页布局中的应用（Application of float in

the webpage layout）

应用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块的下方，即位于sidebar和main区域的后面，图5中虚线部分。如果将footer区域的高度设置高于sidebar和main区域的高度，更容易看出来。为了清除这种影响，需要在footer的样式中设置clear：left，此时的效果如图6所示。

另外可以通过在main盒子下面添加一个空盒子的方式清除浮动的影响，如前文所述。

4 Float在导航制作中的应用（Application of float in

the navigation）

float不但对整个页面布局进行规划，也可以对一些基本元素如导航等进行排列。制作导航，通常采用无序列表，html代码如下：

经过简单的样式设置，效果如图7所示。

如果需要横向导航条，则需要将li设置浮动，设置浮动之后的效果如图8所示。

可以看出浮动的元素脱离了当前文档，跑出了虚线框外。为了清除这种影响，我们仍然采用clear，在之前添加