Web建造者要對付的最棘手情況之一是：相同的CSS代碼被不同的瀏覽器解釋後會產生不同的效果。在以前，各種不同的瀏覽器產生極其不同的頁面是隨處可見的，而現在我們可以用所謂的符合標準的瀏覽器獲得更好的效果。然而，顯示效果的差別還是無法避免。
當前處於領導地位的一些瀏覽器在處理浮動效果上就存在著這樣的差別。如果有人想建立一個能夠隨著瀏覽器視窗的大小變化而動態更改大小多欄的布局，那麼這將是一個特別麻煩的問題。
簡單的沒有浮動的頁面
假設你有兩個divdiv#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的邊緣，而以前是不會這樣的。
如果你有一個以上的浮動元素，那麼第二個和隨後的浮動元素會緊接著第一個排成一條，其相片順序非常像文本裡的一行字母。一系列浮動元素會對齊成一行，直到撐滿瀏覽器視窗的整個寬度，然後換到下一行，就像段落裡的文字那樣排列。
固定寬度的浮動
只要div#one和div#two具有固定寬度，而且其總寬度小於瀏覽器視窗的寬度，它們就會像例B所示的那樣緊挨著排在一起。幾個大的瀏覽器在處理固定寬度浮動的方式上保持著相當的一致性。下面的CSS代碼所產生的頁面在IE6、Netscape 7、Mozilla 1和Opera 7裡顯示出來是一模一樣的。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
