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