前面介紹的規則有一些有意思的后果，這些結果源干兩方面，一方面是規則中指出了一些要求，另一方面是規則中有些方面沒(méi)有談到。首先要討論網(wǎng)頁(yè)設計里浮動(dòng)元素比其父元素高時(shí)會(huì )有什么結果。

實(shí)際上，這種情況經(jīng)常發(fā)生，以一個(gè)小文檔為例，這個(gè)文檔只包含幾個(gè)段落和h3元素，其中第一個(gè)段落包含一個(gè)浮動(dòng)圖像。另外，這個(gè)浮動(dòng)圖像有5像素的外邊距（5px）。你可能認為這個(gè)文檔應該昆示如下，如S 10-14所示。

當然，這里并沒(méi)有什么反常的地方，不過(guò)圖10-15顯示了為第一個(gè)段落設置一個(gè)背景時(shí)會(huì )發(fā)生什么。

這與第二個(gè)例子基本上沒(méi)有什么不同，只不過(guò)背景可見(jiàn)?？梢钥吹?，網(wǎng)頁(yè)設計浮動(dòng)圖像超出了其父元素的底端。當然，在第一個(gè)例子中也是如此，只不過(guò)第一個(gè)例子中不明顯，因為無(wú)法看到背景。前面討論的浮動(dòng)規則只處理了浮動(dòng)元素和其父元素的左。右和上邊界，而沒(méi)有涉及下邊界，這個(gè)遺漏是故意的，這就會(huì )得到如圖10-15中所示的行為。

警告：實(shí)際上，有些瀏覽器不能正確地做到這一點(diǎn)。相反，它們會(huì )增加父元素的高度，使浮動(dòng)元素能夠包含在父元素中，即使這會(huì )導致父元素中出現大量多余的空白。

網(wǎng)站建設CSS2.1澄清了浮動(dòng)元素行為的一個(gè)方面：浮動(dòng)元素會(huì )延伸，從而包含其所有后代浮動(dòng)元素（而網(wǎng)站建設CSS的先前版本沒(méi)有明確指出會(huì )發(fā)生什么情況）。所以，通過(guò)將父元素置為浮動(dòng)元素，就可以把浮動(dòng)元素包含在其父元素內，如下例所示：

<div style="float: left; width: 100%;">

<img src="hay.gif" style="float: left;">

The 'div' will stretch around the floated image because the 'div' has been floated.

</div>

與此相關(guān)，考慮背景及其與文檔中之前出現的浮動(dòng)元素的關(guān)系，見(jiàn)圖10-16所示。

網(wǎng)頁(yè)設計里由于浮動(dòng)元素同時(shí)處于流內和流外，所以這種情況肯定會(huì )發(fā)生。然后會(huì )怎樣呢？標題的內容由浮動(dòng)元素“顯示”，不過(guò)，標題的元素寬度還是與父元素寬度相等。因此，其內容區將跨父元素的寬度，相應地，背景寬度也與父元素寬度相等。為了避免蓋在浮動(dòng)元素下面，具體內容并不從其內容區左邊界開(kāi)始顯示。