CSS佈局之浮動（一）

CSS浮動一直是個比較讓人鬱悶的問題，很多的佈局問題都出在浮動上，特別是當浮動的列數很多時，但其實只要理解了兩列結構的浮動，面對多列數的浮動也不會再心慌，因為兩列結構的左右浮動是最基本的浮動，也是更多浮動的基礎，三列、四列等的浮動都是出於此的。

來看一下幾種常見的CSS兩列浮動，CSS代碼見以下各分類，HTML結構代碼如下：

-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

開始我是在左邊，後面可能到右邊

開始我是在右邊，後面就可能跑到左邊去

左側定寬右側自適應：

#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前面，也就是說，如果是照上面的程式碼，那麼

…與

…的順序應該調換一下：

開始我是在右邊，後面就可能跑到左邊去

開始我是在左邊，後面可能到右邊

當然，也可以在不改動HTML結構的情況下，利用CSS樣式去調整浮動順序，這也是CSS的優點之一，即可以在不改動原HTML結構的情況下，完成對頁面的修改：

#a{float:left; width:200px; background:#aaa;}
#b{background:#f00; margin-left:200px;}

 以上就是CSS佈局之浮動的內容，更多相關文章請關注PHP中文網（www.php.cn）！