浅析浮动定位在网页中的应用
2013-04-29陈伟卫黄川林崔艳清
陈伟卫 黄川林 崔艳清
【摘要】 浮动是CSS布局网页中最常用的定位方法，能够改变页面对象的前后流动顺序，简化内容的排版，具有良好的伸缩性。
【关键词】 CSS定位 Float Clear
浮动是CSS布局网页中最常用的定位方法，也是理解CSS布局的重点与难点。浮动能够改变页面对象的前后流动顺序，简化内容的排版，而且具有良好的伸缩性。
一、默认文档流
在理解浮动之前，先讲一下默认文档流，它是一个浏览器解析网页的重要概念，对于一个html网页，body元素下的任意元素，会根据其书写的前后顺序，组成了一个个上下关系，这便是文档流。文档流是浏览器的默认显示规则。
实例1的html代码如下：
……
默认文档流所示效果如图1所示：
二、浮动布局float属性的用法
float属性的具体浮动方式有三种：left：对象将向左浮动，下面的内容流到当前对象的右侧；right：对象将向右浮动，下面的内容流向左侧；none：对象不浮动。下面以实例详解其用法。
实例1加入浮动后的CSS代码如下所示：
#left {
background-color： #CCC；
height： 100px；
width： 100px；
border： 1px solid #000；
float：left；
}
#right {
background-color：#390；
height： 150px；
width： 150px；
border： 1px solid #000；
float：left；
}
效果如图2所示：
通过简单的float代码，改变了页面中三个对象的显示顺序，让两个盒子还有文字在同一行并排显示。
需要注意的是：对象进行浮动后，脱离了原来默认文档流，所以同一层的盒子需要一起加浮动属性。
三、清除的用法
clear清除属性是浮动布局中的另一个重要工具，指出了不允许有浮动对象的边。它有四个属性值：none：允许两边都可以有浮动对象；left：不允许左边有浮动对象；right：不允许右边有浮动对象；both：不允许有浮动对象。
如果给上述实例中的段落文字加入清除属性，段落文字就会另起一行显示，形成一种新的布局样式。加入的CSS代码如下所示：
p{
clear：both；
}
清除属性的第一种用法是：如果因为特殊设计，不希望下面的对象继续跟着浮动，便可以使用clear属性来拒绝某个方向的浮动。第二种用法是：浮动很多元素之后，突然需要另起一行，也可以使用clear属性。通过CSS布局中浮动（float）和清除（clear）属性，可以在不改变html代码的情况下，调整对象的显示位置。而且浮动与清除相互配合，会产生多种实用的布局效果，所以是掌握浮动布局的重点。
参 考 文 献
[1] 李超. CSS网站布局实录（第二版）.科学出版社，2007
[2] 温谦，主觯程.别具光芒——CSS网页布局案例剖析，2010
