浮動(dòng)和定位

當(dāng)然，通過字體改變、背景和所有其他屬性，建設(shè)的網(wǎng)站能讓內(nèi)容看上去不錯(cuò)，不過CSS在完成基本布局任務(wù)方面怎么樣呢？下面來看浮動(dòng)和定位。網(wǎng)站建設(shè)CSS對(duì)此提供了一些工具，利用這些工具，可以建立列式布局，將布局的一部分與另一部分重疊，還可以完成多年來通常需要使用多個(gè)表才能完成的任務(wù)。

定位的基本思想很簡(jiǎn)單，它允許網(wǎng)頁設(shè)計(jì)人員定義元素框相對(duì)于其正常位置應(yīng)該出現(xiàn)在哪里，或者相對(duì)于父元素、另一個(gè)元素甚至瀏覽器窗口本身的位置。顯然這個(gè)特性功能很強(qiáng)大，也很讓人驚嘆。要知道，用戶代理對(duì)CSS2中定位的支持遠(yuǎn)勝于對(duì)其他方面的支持，對(duì)此不應(yīng)感到奇怪。

另一方面，網(wǎng)站建設(shè)CSS1中首次提出了浮動(dòng)，它以Netscape在Web發(fā)展初期增加的一個(gè)功能為基礎(chǔ)。浮動(dòng)不完全是定位，不過，它當(dāng)然也不是正常流布局。本章后面將明確浮動(dòng)的含義。

浮動(dòng)

網(wǎng)頁設(shè)計(jì)人員可能對(duì)浮動(dòng)元素的概念已經(jīng)有所認(rèn)識(shí)。從Netscape 1以來，就可以通過聲明讓圖像浮動(dòng)，如聲明<img src="b5.gif" align="right">這會(huì)導(dǎo)致一個(gè)圖像浮動(dòng)到右邊，而允許其他內(nèi)容（如文本）“圍繞”該圖像。實(shí)際上，“浮動(dòng)”一詞源自文檔“HTML 2.0的擴(kuò)展”，其中指出：

ALIGN選項(xiàng)有所増補(bǔ)，對(duì)此需要做一些解釋。首先來看值“l(fā)eft”和“right”。

可以把這些對(duì)齊方式看作是全新的浮動(dòng)圖像類型。

過去，只可能浮動(dòng)圖像（某些瀏覽器可能還支持表的浮動(dòng)）。但網(wǎng)站建設(shè)CSS允許浮動(dòng)任何元素，從圖像到段落再到列表，所有元素都可以浮動(dòng)。在網(wǎng)站建設(shè)中，這種行為使用屬性float實(shí)現(xiàn)。

float

值：left | right | none | inherit

初始值：none

應(yīng)用于：所有元素

繼承性：無

計(jì)算值：根據(jù)指定確定

例如，要把一個(gè)圖像浮動(dòng)到左邊，可以使用以下標(biāo)記：

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

圖10-1清楚地指出，圖像“浮動(dòng)”到瀏覽器窗口的左邊，文本則圍繞著該圖像。這正是你所期望的。

圖10-1：浮動(dòng)圖像

不過，用網(wǎng)站建設(shè)CSS浮動(dòng)元素時(shí)會(huì)出現(xiàn)一些有意思的問題。