我們已經(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)看到過,這是因為浮動元素的外邊距邊界定義了浮動框的邊界。
當(dāng)前文章標(biāo)題:網(wǎng)頁設(shè)計中的清除
當(dāng)前URL:http://m.supportcoffeeroasters.com/news/wzzz/remove.html