來看一下幾種常見的CSS兩列浮動，CSS代碼見以下各分類，HTML結構代碼如下：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>CSS浮動</title>
</head>
<body>
<div id=”a”>開始我是在左邊，後面可能到右邊</div>
<div id=”b”>開始我是在右邊，後面就可能跑到左邊去</div>
</body>
</html>
左側定寬右側自適應：
#a{float:left; width:200px; background:#aaa;}
#b{background:#f00;}
當需要左側定寬而右側自動時，則只需要設定a對象為左浮動即可，b對象預設是占整個螢幕的寬度的，但因為a為左浮動並且佔了200PX的寬度，b則自動位於a後面。
當然這樣會有一個問題，那就是當左側的內容高度超過右側時，右側的高度並不能隨之而增高，而當右側內容高於左側時，右側的內容就會流到左側內容的底下去。
解決這個問題的一個辦法是，給b也設定一個浮動，當然並不是設定右浮動，如果是設定的右浮動，當右側內容少不夠一行的寬度時左右兩側中間則會出現空白：
#a{float:left; width:200px; background:#aaa;}
#b{background:#f00; float:right;}
給b設定左浮動時，則可以解決中間出現空白的問題，但同樣的道理，當b對象內容少不夠一行的寬度時時，右側就會出現空白：
#a{float:left; width:200px; background:#aaa;}
#b{background:#f00; float:left;}
當然有另外一種兩全的解決辦法，即設定b對象距離左邊的位置，這樣即可以達到浮動的目的也可以解決b對象內容過多而流入到a對象下面的問題：
#a{float:left; width:200px; background:#aaa;}
#b{background:#f00; margin-left:200px;}
右側定寬左側自適應：
與左側定寬右側自動一樣的道理，右側定寬左側自動同樣可以實現：
#a{background:#f00; margin-left:200px;}
#b{float:right; width:200px; background:#aaa;}
如果按照上面的代碼，那麼你會發現這個代碼並不能實現右浮動，b對象顯示在a對象的下面，並沒有如預期的那樣顯示成右側定寬左而自動的效果。因為HTML結構的原因，浮動DIV應該出現在沒有浮動的DIV前面，也就是說，如果是按上面的代碼，那麼<div id=”a”>…</dia>與<div id=”b”>…</dia>的順序應該調換一下：
<div id=”b”>開始我是在右邊，後面就可能跑到左邊去</div>
<div id=”a”>開始我是在左邊，後面可能到右邊</div>
當然，也可以在不改動HTML結構的情況下，利用CSS樣式去調整浮動順序，這也是CSS的優點之一，即可以在不改動原HTML結構的情況下，完成對頁面的修改：
#a{float:left; width:200px; background:#aaa;}
#b{background:#f00; margin-left:200px;}
以上就是CSS布局之浮動的內容，更多相關文章請關注topic.alibabacloud.com（www.php.cn）！
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
