深入討論浮動(dòng)的詳細(xì)內(nèi)容之前，首先要建立包含塊的概念，這很重要。網(wǎng)頁設(shè)計(jì)的浮動(dòng)元素的包含塊是其最近的塊級(jí)祖先元素。因此，在以下標(biāo)記中，浮動(dòng)元素的包含塊就是包含該浮動(dòng)元素的段落元素：
<h1>Test</h1>
<P>
This is paragraph text, but you knew that. Within the content of this paragraph is an image that's been floated.
<img src="testy.gif- style="float: right;">
The containing block for the floated image is the paragraph.
</P>
注意：本章后面討論定位時(shí)還會(huì)討論包含塊的概念。
此外，浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框，而不論這個(gè)元素本身是什么。因此，如果it一個(gè)鏈接浮動(dòng)，即使該鏈接元素本身是行內(nèi)元素，通常會(huì)生成一個(gè)行內(nèi)框，但只要它是浮動(dòng)的，就會(huì)生成一個(gè)塊緝框。它會(huì)像塊級(jí)元素一樣擺放和表現(xiàn)（例如，就好像是一個(gè)div元素）。對(duì)浮動(dòng)元素聲明display: block也不是不可能，不過沒有必要這么做。
網(wǎng)站建設(shè)里有一系列特定規(guī)則控制著浮動(dòng)元素的擺放，所以在介紹浮動(dòng)元素的行為之前，先來討論這些規(guī)則。這些規(guī)則與控制外邊距和寬度計(jì)算的規(guī)則很相似，開始看起來都一樣。規(guī)則如下：
1、浮動(dòng)元素的左（或右）外邊界不能超出其包含塊的左（或右）內(nèi)邊界。
這一點(diǎn)很顯然。左浮動(dòng)元素的左外邊界向左最遠(yuǎn)只能到其包含塊的左內(nèi)邊界，類似地，右浮動(dòng)元素向右最遠(yuǎn)只能到達(dá)其包含塊的右內(nèi)邊界，如圖10-5所示。
2、浮動(dòng)元素的左（或右）外邊界必須是源文檔中之前出現(xiàn)的左浮動(dòng)（或右浮動(dòng)）元素的右（左）外邊界，除非后出現(xiàn)浮動(dòng)元素的頂端在先出現(xiàn)浮動(dòng)元素的底端下面。這條規(guī)則可以防止浮動(dòng)元素彼此“覆蓋”。如果一個(gè)元素向左浮動(dòng)，而另一個(gè)元素已經(jīng)在那個(gè)位置，后放置的元素將挨著前一個(gè)浮動(dòng)元素的右外邊界放置。不過，如果一個(gè)浮動(dòng)元素的頂端在所有之前浮動(dòng)圖像（元素）的底端下面，它可以一直浮動(dòng)到父元素的左內(nèi)邊界。圖10-6顯示了這種行為的一些例子。
這個(gè)規(guī)則的好處是，所有浮動(dòng)內(nèi)容都是可見的，因?yàn)?a href="http://www.iy5y368.cn" target="_self" title="云南網(wǎng)頁設(shè)計(jì)">設(shè)計(jì)人員不必?fù)?dān)心一個(gè)浮動(dòng)元素與另一個(gè)浮動(dòng)元素重疊。這使得浮動(dòng)很安全。使用定位時(shí)情況則完全不同，定位很容易導(dǎo)致元素相互覆蓋。
3、左浮動(dòng)元素的右外邊界不會(huì)在其右邊右浮動(dòng)元素的左外邊界的右邊。一個(gè)右浮動(dòng)元素的左外邊界不會(huì)在其左邊任何左浮動(dòng)元素的右外邊界的左邊。
這條規(guī)則可以防止浮動(dòng)元素相互重疊。假設(shè)有一個(gè)body，寬為500像素，它只有兩個(gè)300像素寬的圖像。第一個(gè)圖像浮動(dòng)到左邊，第二個(gè)浮動(dòng)到右邊。這個(gè)規(guī)則可以防止第二個(gè)圖像與第一個(gè)圖像重疊100像素。實(shí)際上，它會(huì)要求第二個(gè)圖像向下浮動(dòng)，直到其頂端在左浮動(dòng)圖像的底端之下，如圖10-7所示。
4、一個(gè)浮動(dòng)元素的頂端不能比其父元素的內(nèi)頂端更高。
如果一個(gè)浮動(dòng)元素在兩個(gè)合并外邊距之間，放置這個(gè)浮動(dòng)元素時(shí)就好像在兩個(gè)元素之間有一個(gè)塊級(jí)父元素。這個(gè)規(guī)則的前半部分很簡(jiǎn)單，可以防止浮動(dòng)元素一直浮動(dòng)到文檔的頂端。正確的行為見圖10-8所示。這個(gè)規(guī)則的第二部分則是對(duì)某些情況下的對(duì)齊進(jìn)行微調(diào)一例如，如果有三個(gè)段落，其中中間的段落浮動(dòng)。在這種情況下，浮動(dòng)段落就會(huì)像有一個(gè)塊級(jí)父元素一樣浮動(dòng)。這能防止浮動(dòng)段落一直向上移動(dòng)到三個(gè)段落共同的父元素的頂端。
5、浮動(dòng)元素的頂端不能比之前所有浮動(dòng)元素或塊級(jí)元素的頂端更高。
類似于規(guī)則4，規(guī)則5要求浮動(dòng)元素不能一直浮動(dòng)到其父元素的頂端。另外，網(wǎng)頁設(shè)計(jì)的浮動(dòng)元素的頂端也不可能比之前出現(xiàn)的浮動(dòng)元素的頂端更高。圖10-9所示就是這樣一個(gè)例子，在這里可以看到，由于第二個(gè)浮動(dòng)元素必須在第一個(gè)浮動(dòng)元素的下面，第三個(gè)浮動(dòng)元素的頂端則是第二個(gè)浮動(dòng)元素的頂端，而不是第一個(gè)浮動(dòng)元素的頂端。
6、如果源文檔中一個(gè)浮動(dòng)元素之前出現(xiàn)另一個(gè)元素，浮動(dòng)元素的頂端不能比包含該元素所生成框的任何行框的頂端更高。
類似于規(guī)則4和規(guī)則5，這個(gè)規(guī)則進(jìn)一步限制了元素的向上浮動(dòng)，不允許元素浮動(dòng)到包含該浮動(dòng)元素之前內(nèi)容的行的頂端之上。假設(shè)一個(gè)段落的正中間有一個(gè)浮動(dòng)圖像。這個(gè)圖像頂端最高只能放在該圖像所在行框的頂端。從圖10-10中可以看到，這樣圖像就不會(huì)向上浮動(dòng)太遠(yuǎn)。
圖10-9：使浮動(dòng)元素總在其之前浮動(dòng)元素的下面
圖10-10：使浮動(dòng)元素在其上下文內(nèi)
7、左（或右）浮動(dòng)元素的左邊（右邊）有另一個(gè)浮動(dòng)元素，前者的右外邊界不能在其包含塊的右（左）邊界的右邊（左邊）
也就是說，浮動(dòng)元素不能超出其包含元素的邊界，除非它太寬，本身都無法放下，這就能防止出現(xiàn)以下情況，即多個(gè)浮動(dòng)元素出現(xiàn)在一個(gè)水平行上，遠(yuǎn)遠(yuǎn)超出其包含塊的邊界，相反，如果浮動(dòng)元素出現(xiàn)在另一個(gè)浮動(dòng)元素的旁邊，而因此可能導(dǎo)致超出包含塊的話，實(shí)際上這個(gè)浮動(dòng)元素會(huì)向下浮動(dòng)到之前浮動(dòng)元素下面的某一點(diǎn)，如圖10-11所示（圖中浮動(dòng)元素從下一行開始，由此更清楚地說明這個(gè)規(guī)則在起作用）。這個(gè)規(guī)則最早在網(wǎng)站建設(shè)CSS2中出現(xiàn)，修正了CSS1在這方面的遺漏。
圖10-11：如果沒有足夠的空間，浮動(dòng)元素會(huì)被擠到一個(gè)新的“行”上
8、浮動(dòng)元素必須盡可能高地放置。
當(dāng)然，規(guī)則8要受前7條規(guī)則的限制。歷史上，瀏覽器會(huì)把浮動(dòng)元素的頂端與該圖像標(biāo)記所在行之后的行框的頂端對(duì)齊。不過，從規(guī)則8可以看出，浮動(dòng)元素的頂端應(yīng)當(dāng)與其標(biāo)記所在行框的頂端對(duì)齊，在此假設(shè)有足夠的空間。這種理論上正確的行為如圖10-12所示。
圖10-12：滿足其他約束條件的前提下，浮動(dòng)盡可能高
警告：遺憾的是，由于對(duì)于“盡可能高”沒有明確的定義（這可能表示“按常規(guī)盡可能高”，實(shí)際上對(duì)這種含義存在爭(zhēng)議），所以不能指望被認(rèn)為CSS1兼容的所有瀏覽器都有一致的行為。有些瀏覽器會(huì)遵循歷史做法。將圖像浮動(dòng)到下一行，而另外一些瀏覽器會(huì)在空間足夠的情況下將圖像浮動(dòng)到當(dāng)前行。
9、左浮動(dòng)元素必須向左盡可能遠(yuǎn)，右浮動(dòng)元素則必須向右盡可能遠(yuǎn)。位置越高，就會(huì)向右或向左浮動(dòng)得越遠(yuǎn)。
同樣的，網(wǎng)站建設(shè)中這條規(guī)則要受前幾條規(guī)則的限制。這里同樣存在規(guī)則8中的警告，不過不那么模糊。從圖10-13可以看到，很容易確定元素已經(jīng)向右或向左走得盡可能遠(yuǎn)。