浮動元素

網(wǎng)頁設(shè)計(jì)人員對于浮動元素有幾點(diǎn)要記住。首先，會以某種方式將浮動元素從文檔的正常流中刪除，不過它還是會影響布局。采用網(wǎng)站建設(shè)css的特有方式，浮動元素幾乎“自成一派”，不過它們還是對文檔的其余部分有影響。

這種影響源自于這樣一個(gè)事實(shí)：一個(gè)元素浮動時(shí)，其他內(nèi)容會“環(huán)繞”該元素。對于浮動圖像來說，這種行為我們已經(jīng)很熟悉了，不過要知道，元素浮動時(shí)也同樣如此（例如，浮動一個(gè)段落在圖10-2中，由于為浮動段落增加了外邊距，可以很清楚地看到這種行為：

p.aside {float: right; width: 15em; margin: 0 1em 1em; padding: 0.25em; border: 1px solid;}

可以注意到一些有意思的情況，首先，網(wǎng)頁設(shè)計(jì)中浮動元素周圍的外邊距不會合并。如果浮動一個(gè)有20像素外邊距的圖像，在這個(gè)圖像周圍將至少有20像素的空間。如果其他元素與此圖像相鄰（這表示水平相鄰和垂直相鄰），而且這些元素也有外邊距，那么這些外邊距不會與浮動圖像的外邊距合并，如圖10-3所示：

p img {float: left; margin: 25px;}

第7章做過一個(gè)比喻，將元素比作是有塑料邊的紙片，再來看這個(gè)比喻，圖像周圍的塑料邊（外邊距）絕對不會與其他浮動元素周圍的塑料邊重疊。

如果確實(shí)要浮動一個(gè)非替換元素，則必須為該元素聲明一個(gè)width。否則，根據(jù)網(wǎng)站建設(shè)CSS規(guī)范，元素的寬度趨于0。因此，假設(shè)瀏覽器的最小width值是1個(gè)字符，那么浮動段落可能只有1個(gè)字符寬。如果沒有為浮動元素聲明width值，最后可能得到如圖10-4所示的結(jié)果（坦率地說，這種情況很少見，但確實(shí)是可能的）。

圖10-4：沒有顯式寬度的浮動文本不浮動

不浮動

除了left和right外，float屬性還有一個(gè)值，float: none用于防止元素浮動，

這看上去可能有些傻，因?yàn)橐屢粋€(gè)元素不浮動，最容易的辦法就是不聲明float，這樣不就行了嗎？確實(shí)如此。首先，float的默認(rèn)值是none。換句話說，要得到正常的非浮動行為，必須有這個(gè)值，如果沒有這個(gè)none值，所有元素都會以某種方式浮動。

其次，網(wǎng)站建設(shè)人員可能想覆蓋導(dǎo)入樣式表中的某個(gè)樣式。假設(shè)設(shè)計(jì)人員在使用一個(gè)服務(wù)器端樣式表，這個(gè)樣式表要讓圖像浮動。不過在某個(gè)特定的頁面上，設(shè)計(jì)人員不希望圖像浮動。不必為此再編寫一個(gè)全新的樣式表，而只需在文檔的嵌套樣式表中增加img {float: none;}，不過，除了這種情況，確實(shí)很少有必要真正使用float: none.