Web建造者要對付的最棘手情況之一是：相同的CSS代碼被不同的浏覽器解釋後會生成不同的效果。在以前，各種不同的浏覽器生成極其不同的頁面是隨處可見的，而現在我們可以用所謂的符合標准的浏覽器獲得更好的效果。然而，顯示效果的差別還是無法避免。
當前處於領導地位的一些浏覽器在處理浮動效果上就存在著這樣的差別。如果有人想創建一個能夠隨著浏覽器窗口的大小變化而動態更改大小多欄的布局，那麼這將是一個特別麻煩的問題。
簡單的沒有浮動的頁面
假設你有兩個div——div#one和div#two，它們都有固定的寬度。如果沒有浮動或者絕對的定位，這些div就會以一個摞在另一個之上的形式放在浏覽器窗口的左側（如例A所示），因為標准的頁面安排順序是從左到右，從上到下，塊級元素（block-level element）都會在前一個元素下面緊接著開始一個新的行。
下面是所有例子都需要的一段HTML：
<body>
<div id="one">
Port side text...
</div>
<div id="two">
Second column text...
</div>
</body>
下面的CSS代碼用於基本的、不帶浮動的版本：
div#one {
width: 150px;
margin: 0px;
background-color: red;
}
div#two {
width: 300px;
padding: 0px 10px 5px 10px;
margin: 0px;
background-color: silver;
}
基本的浮動
當你創建一個包含有float: left或者float: right屬性的CSS樣式，並把它應用到諸如div標簽這樣的塊級元素上的時候，div就會從文檔的普通文本安排順序裡被刪除，並被強制放到包含元素（containing element）的左側或者右側。如果包含元素是一個主體標簽，那麼div就會浮動到浏覽器窗口的一側。否則，浮動的div就會移動到包含div的邊緣，而以前是不會這樣的。
如果你有一個以上的浮動元素，那麼第二個和隨後的浮動元素會緊接著第一個排成一條，其排列方式非常像文本裡的一行字母。一系列浮動元素會對齊成一行，直到撐滿浏覽器窗口的整個寬度，然後換到下一行，就像段落裡的文字那樣排列。
1 2 3 下一頁
可變寬度的浮動帶來了可變的結果
當你想把div變成寬度可變的時候，生成浮動效果不一致的問題就浮現出來了。例如，假設你想要在頁面的左側放一個固定寬度欄，用於導航按鈕的列表，而想在右側放另外一個欄，讓它根據浏覽器窗口（的大小）自由擴展和收縮。
你可能會認為自己用兩個左側浮動的div就能實現這個效果；一個是固定寬度的，而另一個把寬度設定為自動，讓div自動調整大小，這樣它就能夠填補第一個div和浏覽器窗口右側之間的空白。例C就是下面代碼顯示的結果：
div#one {
float: left;
width: 150px;
margin: 0px;
background-color: red;
}
div#two {
float: left;
width: auto;
padding: 0px 10px 5px 10px;
margin: 0px;
background-color: silver;
}
如果在IE裡顯示這個例子，你會獲得預計的效果，即左邊是固定寬度的欄，緊挨著它右側的是一個可變寬度的欄；但是，相同的代碼在其他當前流行的浏覽器上卻會生成不同的結果。第二個div會掉到第一個的下面，而不是接著這一行放在右邊。結果就和不帶浮動的頁面非常類似。
上一頁 1 2 3 下一頁
解決方案
要獲得這種兩欄布局，其中一欄能夠自動調整大小的理想效果的一種解決方案是對第一欄使用浮動div，但是要從必須調整大小的那一欄裡把浮動刪掉。由於浮動欄和普通的文檔安排順序是分離的，所以常規的div會被放在上方，但是在浮動div的下方。在左邊添加一個padding，並讓其等於浮動div的寬度，而常規div的內容看起來就會像是放在左邊div右側的一個欄裡。例D說明了這個技巧。下面的代碼能夠在當前所有的浏覽器裡生成相同的效果。
div#one {
float: left;
width: 150px;
margin: 0px;
background-color: red;
}
div#two {
width: auto;
padding: 0px 10px 5px 160px;
margin: 0px;
background-color: silver;
}
盡管當前Netscape／Mozilla浏覽器一般都被認為要比IE更加符合標准，但是我個人認為IE生成浮動元素的效果要比前兩個浏覽器更加一致。但是如果不考慮哪一個生成的效果是“正確的”，那麼其差別就會給Web建造者帶來最頭疼的問題。要避免你的頁面設計出現問題，知道浏覽器生成的效果會有所不同是第一步，也是最重要的一步。
上一頁 1 2 3