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

這可以利用clear屬性完成。

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

初始值：none

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

繼承性：無

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

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

h3 {clear: left;}

這會把h3推過所有左浮動元素，不過還允許浮動元素出現(xiàn)在h3元素的右邊，如圖10-22所示。

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

h3 {clear: both;}

這很好理解，這個值會防止指定了clear的元素兩邊存在浮動元素，如圖10-23所示。

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

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

h3 (clear: both;)

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

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

在網(wǎng)站建設(shè)CSS2.1中，引入了一個清除區(qū)域。清除區(qū)域是在元素上外邊距之上增加的額外間隔，不允許任何浮動元素進(jìn)入這個范圍內(nèi)。這意味著元素設(shè)置clear屬性時，它的外邊距并不改變。之所以會向下移是這個清除區(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上邊框與浮動圖像下邊框之間沒有間隔，因為在h3的上外邊距（15像素）之上增加了25像素的清除區(qū)域，將h3的上邊框邊界推到剛好越過浮動元素的下邊界。一般都會這樣，除非h3的上外邊距計算為40像素或更多，在這種情況下，h3會很自然地放在浮動元素下面，clear值是什么則無關(guān)緊要。

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

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

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

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