浮动和定位

当然，通过字体改变、背景和所有其他属性，建设的网站能让内容看上去不错，不过CSS在完成基本布局任务方面怎么样呢？下面来看浮动和定位。网站建设CSS对此提供了一些工具，利用这些工具，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表才能完成的任务。

定位的基本思想很简单，它允许网页设计人员定义元素框相对于其正常位置应该出现在哪里，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然这个特性功能很强大，也很让人惊叹。要知道，用户代理对CSS2中定位的支持远胜于对其他方面的支持，对此不应感到奇怪。

另一方面，网站建设CSS1中首次提出了浮动，它以Netscape在Web发展初期增加的一个功能为基础。浮动不完全是定位，不过，它当然也不是正常流布局。本章后面将明确浮动的含义。

浮动

网页设计人员可能对浮动元素的概念已经有所认识。从Netscape 1以来，就可以通过声明让图像浮动，如声明<img src="b5.gif" align="right">这会导致一个图像浮动到右边，而允许其他内容（如文本）“围绕”该图像。实际上，“浮动”一词源自文档“HTML 2.0的扩展”，其中指出：

ALIGN选项有所増补，对此需要做一些解释。首先来看值“left”和“right”。

可以把这些对齐方式看作是全新的浮动图像类型。

过去，只可能浮动图像（某些浏览器可能还支持表的浮动）。但网站建设CSS允许浮动任何元素，从图像到段落再到列表，所有元素都可以浮动。在网站建设中，这种行为使用属性float实现。

float

值：left | right | none | inherit

初始值：none

应用于：所有元素

继承性：无

计算值：根据指定确定

例如，要把一个图像浮动到左边，可以使用以下标记：

<img src="b4.gif" style="float:left;" alt="b4">

图10-1清楚地指出，图像“浮动”到浏览器窗口的左边，文本则围绕着该图像。这正是你所期望的。

图10-1：浮动图像

不过，用网站建设CSS浮动元素时会出现一些有意思的问题。