CSS具有兩面性。就像它在格式化文本、導航欄、圖片以及其他小小的網頁方面很棒一樣，當你準備好佈局完整的網頁時，它真正可怕的一面也展現出來了。
CSS佈局有兩種風格——絕對定位和浮動。絕對定位讓你把一個元素以像素級的精確性定位在網頁的任何位置——或者理論上是這樣。這種整體控制令人興奮，就如你將在下一章中所看到的，但是實際上很難實現。這就是大量網頁設計使用基於浮動的佈局的原因，也是本章的主題。
CSS佈局如何進行
How CSS Layout Works
HTML的局限性迫使網頁設計師們去開發更聰明的方式來使他們的網頁更美觀。過去最常用的工具是<table>標籤，它本是用來創建電子數據表——比如由數據行和列組成的信息顯示表。但是設計師們卻用HTML的表格來創建一種用來組織網頁內容的腳手架（見圖11-1）。可是由於<table>標籤本來不是要用於佈局的，因此設計師們不得不經常以各種不尋常的方式來使用這個標籤——比如把一個表格放在另一個表格的單元里面——僅僅為了得到他們想要的效果。這種方法的工作量很大，增加了大量額外的HTML代碼，並使得後面要修改設計很難。但是在CSS出現之前，那就是網頁設計師們所擁有的一切辦法。
如果你已經習慣於使用<table>標籤，那麼當你開始使用CSS進行佈局時，必鬚髮展一種新的思維。首先，忘掉行和列（運用表格時的一種重要的觀念）。沒有
列跨度、行跨度和格子狀的表格結構在CSS中是找不到的。然而，你可以把一個<div>標籤當成一個表格單元。有了表格單元，<div>標籤就是把你要的內容定位在網頁區域的一個邏輯位置。此外，如你所見，CSS設計經常把一個div嵌套在另一個div裡面，就像你把表格嵌套在表格里面來獲得特定的效果一樣——但是，幸運的是，CSS方法只用少得多的HTML代碼。
強大的<div>標籤
The Mighty <div> Tag
無論使用表格還是CSS，網頁佈局都是把大塊的內容放進網頁的不同區域裡面。有了CSS，最常用來組織內容的元素就是<div>標籤。如第18頁所述，<div>標籤是沒有固有格式化屬性的一個HTML元素（除了瀏覽器把這個標籤當成前後有換行的塊之外）；反之，它被用來標識元素的一個邏輯組合或者網頁中的一個分區。
你將代表性地把一大塊屬於一起的HTML包圍在一個<div>裡面。圖11-1中包含logo和導航欄的元素佔據了網頁頂部，因此用一個<div>標籤把它們包圍起來很有意義。至少，你要給網頁的所有主要區域包含<div>標籤，例如橫幅、主要內容區域、工具條、頁腳，等等。但是它也可能把一個或者更多的div包在一個<div>裡面。一種最常用的方法就是把<body>標籤裡面的HTML包在一個<div>裡面。然後可以通過把CSS應用到包裝<div>，設置基礎的頁面屬性。你可以給網頁內容設定一個整體的寬度，設置左邊距和右邊距，或者把所有網頁內容在屏幕的中間居中。 （在第313頁的教程中，你有機會用到一個包裝<div>。）
一旦已經把<div>標籤放在了適當的位置上，再給每個<div>標籤添加一個類或者ID，變成你分別對每個<div>定義樣式的句柄。對於只出現一次和形成網頁的基本構建塊的網頁部位，設計師們通常使用一個ID。一個網頁橫幅區域的<div>標
簽看起來可能像這樣：<div id="banner">。你可以對一個ID每頁只使用一次，因此當有一個多次顯示的元素時，就用一個類代替。如果你有幾個定位照片和照片說明的div時，可以創建一個樣式像這樣：<div>。
有了類似這些的樣式，就可以定位各種各樣的網頁設計元素了。利用CSS的float屬性，你可以定位不同的內容塊給一張網頁的左邊或者右邊（或者一個包含塊比如另一個<div>的左邊或者右邊）。
留言列表
