原创《基于CSSDIV的float技术在网页制作中的应用》：本论文为免费优秀的关于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 nigation）
float不但对整个页面布局进行规划,也可以对一些基本元素如导航等进行排列.制作导航,通常采用无序列表,html代码如下：
经过简单的样式设置,效果如图7所示.
如果需要横向导航条,则需要将li设置浮动,设置浮动之后的效果如图8所示.
可以看出浮动的元素脱离了当前文档,跑出了虚线框外.为了清除这种影响,我们仍然采用clear,在之前添加,并对clear样式进行设置.得到的结果如图9所示.可以在此基础上应用其他样式,使导航更美观更吸引用户.
5 结论（Conclusion）
本文通过三个例子说明了float浮动的原理,以及如何利用clear属性清除设置浮动之后对其他元素造成的影响.结果表明,float属性在网页制作中非常高效实用.
参考文献（References）
[1] 曾顺.精通CSS+DIV网页样式与布局[M].北京：人民邮电出版
社,2010.
[2] 温谦,主觯程.别具光芒——CSS网页布局案例剖析[M].北京：
人民邮电出版社,2010.
[3] 李超.CSS网站布局实录（第二版）[M].北京：科学出版社,2007.
作者简介：
郭巧丽（1980-）,女,硕士,讲师.研究领域：多媒体技术,图
像处理.
曹宏举（1980-）,男,硕士,讲师.研究领域：应用数学.
float论文参考资料：
结论：基于CSSDIV的float技术在网页制作中的应用为关于对不知道怎么写float论文范文课题研究的大学硕士、相关本科毕业论文float论文开题报告范文和文献综述及职称论文的作为参考文献资料下载。
