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

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

圖10-17：有負外邊距時的浮動

盡管看上去有問題，但實際上并沒有違反浮動元素放在其父元素之外的相關(guān)限制。

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

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

圖10-18：利用負外邊距向上和向左浮動詳解

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

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

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