有意思的是，網(wǎng)站建設(shè)里負(fù)外邊距可能導(dǎo)致浮動(dòng)元素移到其父元素的外面。這看上去與先前的規(guī)則相矛盾，不過(guò)其實(shí)并不矛盾。通過(guò)設(shè)置負(fù)外邊距，元素可能看上去比其父元素更寬，同樣的道理，浮動(dòng)元素也可能超出其父元素。

下面考慮一個(gè)向左浮動(dòng)的浮動(dòng)圖像，其左外邊距和上外邊距都是-15px。這個(gè)圖像放在一個(gè)div中，該div沒(méi)有內(nèi)邊距、邊框和外邊距。結(jié)果如圖10-17所示。

圖10-17：有負(fù)外邊距時(shí)的浮動(dòng)

盡管看上去有問(wèn)題，但實(shí)際上并沒(méi)有違反浮動(dòng)元素放在其父元素之外的相關(guān)限制。

仔細(xì)研究上一節(jié)的規(guī)則可以發(fā)現(xiàn)，從技術(shù)上講這種行為是允許的：一個(gè)浮動(dòng)元素的外邊界必須在父元素內(nèi)。不過(guò)，由于外邊距為負(fù)，放置浮動(dòng)元素的內(nèi)容時(shí)就好像覆蓋了自己的外邊界一樣，如圖10-18所示，

通過(guò)數(shù)學(xué)計(jì)算描述如下：假設(shè)div的上內(nèi)邊界在100像素處。為了得出浮動(dòng)元素的上內(nèi)邊界應(yīng)該在哪里，瀏覽器會(huì)做以下計(jì)算：100px +(-15pX）外邊距+0內(nèi)邊距=85px，因此，網(wǎng)站建設(shè)浮動(dòng)元素的上內(nèi)邊界應(yīng)當(dāng)在85像素處，盡管比浮動(dòng)元素父元素的上內(nèi)邊界還要高，但從數(shù)學(xué)計(jì)算可知，這并沒(méi)有違反規(guī)范。出于類(lèi)似的原因，同樣可以解釋為什么浮動(dòng)元素的左內(nèi)邊界可以放在其父元素左內(nèi)邊界的左邊。

圖10-18：利用負(fù)外邊距向上和向左浮動(dòng)詳解

現(xiàn)在可能很多網(wǎng)頁(yè)設(shè)計(jì)人員都想大叫“犯規(guī)！”從我個(gè)人來(lái)說(shuō)，不會(huì)為此批評(píng)你們。例如，上內(nèi)邊界比上外邊界還要高，這看上去是完全錯(cuò)誤的，不過(guò)，如果有一個(gè)負(fù)的上外邊距，確實(shí)會(huì)產(chǎn)生這種結(jié)果，這與負(fù)外邊距使正常的非浮動(dòng)元素視覺(jué)上比其父元素還要寬是一樣的》浮動(dòng)元素框的4個(gè)邊都是如此：如果將外邊距設(shè)置為負(fù)值，內(nèi)容就會(huì)超出外邊界，但從技術(shù)上講并沒(méi)有違反規(guī)范。

這里有一個(gè)重要問(wèn)題：在使用負(fù)外邊距時(shí)，如果浮動(dòng)元素元素超出其父元素，文檔會(huì)如何顯示？例如，一個(gè)圖像可能浮動(dòng)得太遠(yuǎn)，超出了用戶(hù)代理已顯示的一個(gè)段落。在這種情況下，要由用戶(hù)代理決定文檔是否重新顯示，網(wǎng)站建設(shè)CSS1和CSS2規(guī)范明確地指出，用戶(hù)代理不必重新顯示已顯示內(nèi)容來(lái)適應(yīng)文檔中后來(lái)出現(xiàn)的內(nèi)容。換句話(huà)說(shuō)，如果一個(gè)圖像浮動(dòng)到之前已經(jīng)顯示的段落中，它可能只是覆蓋該位置上原有的內(nèi)容。另一方面，用戶(hù)代理也可能采用一種不同的方法處理這種情況，讓內(nèi)容環(huán)繞浮動(dòng)元素重新顯示。不論采用哪種方式，都不要指望肯定會(huì)發(fā)生某一種行為，否則為浮動(dòng)元素設(shè)置負(fù)外邊距的作用會(huì)受到限制。讓元素浮動(dòng)可能很安全，不過(guò)網(wǎng)頁(yè)設(shè)計(jì)人員試圖將元素在頁(yè)面上向上推往往不是好主意。

還有另外一種方法可以讓浮動(dòng)元素超出其父元素的左右內(nèi)邊界：即浮動(dòng)元素比其父元素更寬。在這種情況下，浮動(dòng)元素會(huì)超出右或左內(nèi)邊界，從而盡可能正確地顯示，究競(jìng)是超出右內(nèi)邊界還是左內(nèi)邊界，取決于元素以何種方式浮動(dòng)。這會(huì)得到如圖10-19所示的結(jié)果。