现如今网络是我们每个人都会接触到的东西，我们平时上网所看到的网页都是由计算机专业技术人员精心设计制作的。我们随手点开的一个页面可能包含了很多技术，页面的排版，文章的处理，图片的制作等。本文是一篇论文发表核心期刊投稿的计算机网页制作技术论文，主要论述了基于CSS+DIV的float技术在网页制作中的应用。
摘 要：本文主要描述基于CSS+DIV的float技术在文本环绕、页面布局和页面导航中的应用，对设置浮动元素产生的影响采用clear进行清除处理。Float技术不但对整个页面布局进行规划，也可以对一些基本元素如导航等进行排列，是网页制作中非常重要的方法。
关键词：论文发表核心期刊,CSS+DIV,float,clear
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盒子下面添加一个空盒子的方式清除浮动的影响，如前文所述。
计算机类论文发表核心期刊推荐《电脑与电信》是经国家新闻出版署正式批准，由广东省对外科技交流中心主办的学术理论刊物，国内外公开发行。本刊主要刊登计算机、互联网、通讯、电子等相关领域的理论与实践研究论文，以及相关理论研究综述和介绍国外先进技术的研究报告。
