我們已經(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)圖像”,其效果非常類似干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è)元素周圍多大范圍內(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)框的邊界。
當(dāng)前文章標(biāo)題:網(wǎng)頁(yè)設(shè)計(jì)中的清除
當(dāng)前URL:http://m.iy5y368.cn/news/wzzz/remove.html