我們已經(jīng)討論了一些浮動(dòng)行為，介紹定位前還有一個(gè)內容沒(méi)有談到。網(wǎng)頁(yè)設計人員可能并不總是希望內容流過(guò)浮動(dòng)元素，某些情況下，可能要特意避免這種行為。如果你的文檔分組為小節，可能不希望一個(gè)小節的浮動(dòng)元素浮動(dòng)到另一個(gè)小節中。在這種情況下。你希望將每小節的第一個(gè)元素設置為禁止浮動(dòng)元素出現在它旁邊。如果第一個(gè)元素可能放在一個(gè)浮動(dòng)元素旁邊，則會(huì )向下推，直到出現在浮動(dòng)元素的下面，而且所有后續內容都在其后面出現，如圖10-21所示。

這可以利用clear屬性完成。

clear值：left | right | both | none | inherit

初始值：none

應用于：塊級元素

繼承性：無(wú)

計算值：根據指定確定

例如，網(wǎng)頁(yè)設計人員為了確保所有h3元素不會(huì )放在左浮動(dòng)元素的右邊，可以聲明h3{clear: left;}。這可以解釋為“確保一個(gè)h3的左邊沒(méi)有浮動(dòng)圖像”，其效果非常類(lèi)似干HTML中的<br clear="left">（有諷刺意味的是，大多數瀏覽器的默認行為都是為br元素生成行內框，所以clear不能應用于br，除非改變其display值?。?。以下規則使用clear 來(lái)防止h3元素左邊有浮動(dòng)元素：

h3 {clear: left;}

這會(huì )把h3推過(guò)所有左浮動(dòng)元素，不過(guò)還允許浮動(dòng)元素出現在h3元素的右邊，如圖10-22所示。

為了避免這種情況，確保h3元素不會(huì )與任何浮動(dòng)元素在同一行上，要使用值both:

h3 {clear: both;}

這很好理解，這個(gè)值會(huì )防止指定了clear的元素兩邊存在浮動(dòng)元素，如圖10-23所示。

另一方面，如果只是不希望h3元素的右邊有浮動(dòng)元素，要使用h3{clear: right;}。

最后還有一個(gè)clear: none，它允許元素浮動(dòng)到另一個(gè)元素的任意兩邊。float: none 值之所以存在，主要是為了支持正常的文檔行為，即元素允許其兩邊有浮動(dòng)元素。當然，可以用none來(lái)覆蓋其他樣式，如圖10-24所示。盡管有規則指出h3元素不允許兩邊有浮動(dòng)元素，不過(guò)，有一個(gè)H3特別設置為允許兩邊有浮動(dòng)元素：

h3 (clear: both;)

<h3 style="clear: none;">What's With All The Latin?</h3>

在網(wǎng)站建設CSS1和CSS2中，clear工作如下，它會(huì )增加元素的上外邊距，使之最后落在浮動(dòng)元素的下面，這實(shí)際上會(huì )忽略為清除元素（設置了clear的元素）頂端設置的外邊距寬度。也就是說(shuō)，清除元素的上外邊距可能會(huì )調整，例如，并不是1.5em，而可能增加到10em或25px，甚至7.133in，或者是將元素下移足夠遠（使內容區在浮動(dòng)元素下邊界的下面）所需的任何長(cháng)度。

在網(wǎng)站建設CSS2.1中，引入了一個(gè)清除區域。清除區域是在元素上外邊距之上增加的額外間隔，不允許任何浮動(dòng)元素進(jìn)入這個(gè)范圍內。這意味著(zhù)元素設置clear屬性時(shí)，它的外邊距并不改變。之所以會(huì )向下移是這個(gè)清除區域造成的。要特別注意圖10-25中標題邊框的放置，這是由以下標記得到的結果：

img.sider {float: left; margin: 0;}

h.3 {border: 1px solid gray; clear: left; margin-top: 15px;}

<img src="boxer.gif" class="sider" >

<img src="stripe.gif" >

<h3>Why Doubt Salmon?</h3>

h3上邊框與浮動(dòng)圖像下邊框之間沒(méi)有間隔，因為在h3的上外邊距（15像素）之上增加了25像素的清除區域，將h3的上邊框邊界推到剛好越過(guò)浮動(dòng)元素的下邊界。一般都會(huì )這樣，除非h3的上外邊距計算為40像素或更多，在這種情況下，h3會(huì )很自然地放在浮動(dòng)元素下面，clear值是什么則無(wú)關(guān)緊要。

當然，大多數情況下，網(wǎng)頁(yè)設計人員無(wú)法知道一個(gè)元素周?chē)啻蠓秶鷥炔辉试S有浮動(dòng)元素。要確保一個(gè)清除元素（設置clear屬性的元素）的頂端與一個(gè)浮動(dòng)元素的底端之間有一定空間，可以為浮動(dòng)元素本身設置一個(gè)下外邊距。所以，如果希望上例中的浮動(dòng)元素下面至少有15 像素的空間，可以修改如下：

img.Sider {float: left; margin: 0.0 I5px;}

h3 {border: 1px solid gray; clear: left;}

網(wǎng)頁(yè)設計浮動(dòng)元素的下外邊距會(huì )增加浮動(dòng)框的大小，且由于清除元素必須推到浮動(dòng)框下面的某個(gè)點(diǎn)以下，浮動(dòng)框大小的增加會(huì )使這個(gè)點(diǎn)下移。前面已經(jīng)看到過(guò)，這是因為浮動(dòng)元素的外邊距邊界定義了浮動(dòng)框的邊界。