float屬性接受3種不同值之一：left（左）、right（右）和none（無(wú)）。要把一張圖片移到網(wǎng)頁(yè)的右邊，可以創(chuàng)建這個(gè)類樣式，并把它應(yīng)用到<img>標(biāo)簽上：
.floatRight { float: right; }
相同的屬性應(yīng)用到一個(gè)充滿內(nèi)容的<div>標(biāo)簽上也可以創(chuàng)建一個(gè)工具條：
#sidebar {
float: left;
width: 170px;}
float: left;
width: 170px;}
圖11-3展示了這兩個(gè)樣式的作用。
注意：none值關(guān)閉了任何浮動(dòng)，把元素像一個(gè)正常的沒(méi)有浮動(dòng)的元素一樣定位。這只有已經(jīng)應(yīng)用到元素的浮動(dòng)無(wú)效時(shí)才有用。你可能有一個(gè)應(yīng)用了特定類如“sidebar”的元素，這個(gè)元素浮動(dòng)到右邊。但在網(wǎng)頁(yè)中，你可能要帶有這個(gè)類的元素不要浮動(dòng)，但是又要放置在網(wǎng)頁(yè)流之內(nèi)，就如這個(gè)“注意”方框。通過(guò)用float: none創(chuàng)建一個(gè)更具體的CSS選擇器可以防止這個(gè)元素浮動(dòng)。
如圖11-3的一個(gè)簡(jiǎn)單的兩列設(shè)計(jì)只需要幾個(gè)步驟。
1. 把每一列都包圍在一個(gè)帶有ID或者class屬性的<div>標(biāo)簽里面。
在圖11-3中，列在左邊工具條中的新聞項(xiàng)目被包圍在一個(gè)<div>里面――<div id=”news”>，并且主內(nèi)容在另一個(gè)div里面――<div id=”main”>。
2. 把工具條<div>浮動(dòng)到右邊或者左邊。
當(dāng)你使用浮動(dòng)時(shí)，源順序（添加HTML到一個(gè)文件的順序）很重要。浮動(dòng)元素的HTML必須顯示在要包圍它的元素的HTML前面。
圖11-4展示了3個(gè)兩列的設(shè)計(jì)。左邊的圖表展示了網(wǎng)頁(yè)HTML的源順序：給banner的一個(gè)<div>，后面跟著sidebar的<div>，最后是main content的<div>。在右邊，你可以看到實(shí)際的網(wǎng)頁(yè)布局。在HTML中sidebar在main content前面，因此它可以浮動(dòng)到左邊（上圖，下圖）或者右邊（中圖）。
3. 給浮動(dòng)的sidebar設(shè)定一個(gè)寬度。
除非你正浮動(dòng)一張帶有預(yù)設(shè)寬度的圖片，否則你應(yīng)該始終給浮動(dòng)設(shè)定一個(gè)寬度。這樣，給浮動(dòng)元素創(chuàng)建一個(gè)固定的尺寸，使瀏覽器給其他內(nèi)容騰出了包圍該位置的空間。
這個(gè)寬度可能是一個(gè)固定的尺寸比如170px或者10em。你也可以對(duì)基于瀏覽器窗口寬度的彈性設(shè)計(jì)使用百分比。如果sidebar是20%寬，瀏覽器窗口是700px寬，那么sidebar將是140px寬。但是如果訪問(wèn)者調(diào)整窗口尺寸為1000px，那么sidebar也增大為200px。固定寬度的sidebar更容易設(shè)計(jì)，因?yàn)槟悴槐乜紤]sidebar伸展時(shí)的所有不同寬度。然而，百分比讓你在兩列之間保持相同的比例，可以使其更好看。
注意：當(dāng)整體的網(wǎng)頁(yè)設(shè)計(jì)是一個(gè)固定寬度時(shí)，sidebar的百分比寬度值也取決于包含元素的固定寬度。這個(gè)寬度不取決于窗口尺寸，當(dāng)瀏覽器窗口改變尺寸時(shí)它不會(huì)發(fā)生改變。
4. 給main content添加一個(gè)左邊距。
如果sidebar比網(wǎng)頁(yè)上的其他內(nèi)容更短，來(lái)自主列的文本包圍sidebar的下方，破壞了兩個(gè)并排列的展現(xiàn)效果。添加一個(gè)左邊距等于或者大于縮進(jìn)網(wǎng)頁(yè)主要內(nèi)容的sidebar寬度，產(chǎn)生一個(gè)第二列的幻覺(jué)效果：
#main { margin-left: 180px ; }
順便說(shuō)一下，使左邊距比sidebar的寬度略大通常是個(gè)好主意：這樣產(chǎn)生了一些空的空間――一個(gè)白色的――在兩個(gè)元素之間。因此，當(dāng)利用百分比來(lái)設(shè)定sidebar的寬度時(shí)，給左邊距設(shè)定一個(gè)稍微大一些的百分比值。
沒(méi)有必要去避免給main content的div設(shè)計(jì)寬度，因?yàn)闉g覽器只要擴(kuò)大到適合現(xiàn)有的空間。即使要一個(gè)固定寬度的設(shè)計(jì)，也不必給主內(nèi)容的div設(shè)計(jì)寬度，就如你將在下一節(jié)中所看到的。
]]>