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

這可以利用clear屬性完成。

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

初始值：none

應(yīng)用于：塊級(jí)元素

繼承性：無(wú)

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

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

h3 {clear: left;}

這會(huì)把h3推過(guò)所有左浮動(dòng)元素，不過(guò)還允許浮動(dòng)元素出現(xiàn)在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)元素。當(dāng)然，可以用none來(lái)覆蓋其他樣式，如圖10-24所示。盡管有規(guī)則指出h3元素不允許兩邊有浮動(dòng)元素，不過(guò)，有一個(gè)H3特別設(shè)置為允許兩邊有浮動(dòng)元素：

h3 (clear: both;)

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

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

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

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)有間隔，因?yàn)樵趆3的上外邊距（15像素）之上增加了25像素的清除區(qū)域，將h3的上邊框邊界推到剛好越過(guò)浮動(dòng)元素的下邊界。一般都會(huì)這樣，除非h3的上外邊距計(jì)算為40像素或更多，在這種情況下，h3會(huì)很自然地放在浮動(dòng)元素下面，clear值是什么則無(wú)關(guān)緊要。

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

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

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

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