第十三課：浮動元素（floats）

元素可以通過使用特性float浮動到右側或左側。這意味著文件中的box與其內容浮動到右邊或左側。下面舉例說明：

下面用文字圍繞圖片的另一個例子進一步說明：

這是如何做到的？

上述例子使用的HTML代碼如下：

<div id="picture">
<img src="bill.jpg" alt="Bill Gates">
</div>

<p>causas naturales et antecedentes,
idciro etiam nostrarum voluntatum…</p>

要想讓圖片浮動到左側，并讓文字圍繞它，只需要定義圍繞圖片的箱體，此外設定特性float到左側：

#picture {
float:left;
width: 100px;
}

另一個實例：列（columns）

Floats還可以用于文檔的列。要產生列，用HTML代碼與<div>就可以構造出想要的結構：

<div id="column1">
<p>Haec disserens qua de re agatur
et in quo causa consistat non videt...</p>
</div>

<div id=”column2″>
<p>causas naturales et antecedentes,
idciro etiam nostrarum voluntatum…</p>
</div>

<div id=”column3″>
<p>nam nihil esset in nostra
potestate si res ita se haberet…</p>
</div>

現在將列的寬度設定為33%，然后通過定義float讓每一列浮動到左側：

#column1 {
float:left;
width: 33%;
}

#column2 {
float:left;
width: 33%;
}

#column3 {
float:left;
width: 33%;
}

float can be set as either left, right or none.

特性clear

Clear用于控制文檔中浮動元素之后的元素行為。默認情況下，隨后的元素會提升并填充可用空間。可以查看上面比爾蓋茨圖片的文字自動提升實例。特性clear有left，right，both或none等值。基本概念時，如果用Clear，會設定box的兩方面，箱體的上邊緣border總是在下邊緣border的下面。

<div id="picture">
<img src="bill.jpg" alt="Bill Gates">
</div>

<h1>Bill Gates</h1>

<p class=”floatstop”>causas naturales et antecedentes,
idciro etiam nostrarum voluntatum…</p>

為了避免文字浮動到圖片的另一側上面，可以采用CSS：

#picture {
float:left;
width: 100px;
}

.floatstop {
clear:both;
}

總結

Floats在許多情況下都有用，并經常與positioning一起使用。下一課將結石box的相對和絕對定位。