在上一個文章裡寫了關於左（右）側定寬右（左）側自動縮放的兩列浮動，這篇文章就要說一下三列浮動的問題了。在之前說過，兩列浮動是其他多列浮動的基礎，明白了兩列浮動的原理後，三列或三列以上的多列浮動也變得簡單。
左側中間定寬，右側自適應：
因邊左側跟中間都是定寬的，只有右側是自適應寬度的，所以這個三列浮動是和兩列浮動中的左側定寬右側自適應一樣的道理，HTML結構代碼如下：
-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
只需在兩列浮動的CSS樣式程式碼上再做輕微的改動：
#a{float: left; width:200px; background:#aaa;}
#b{float:left; width:200px;
background:#f00;}
#c{background:#777; margin-left:400px;}
當然這裡要記住一點，那就是必須給b對像一個左浮動。
左側自適應，中間右側定寬：
與左側中間定寬右側自適應一樣的道理，當然前提是要把a、b、c三個物件在HTML的結構程式碼上更換一下順序，瀏覽器的解釋順序應該是c-b-a，因為浮動在未浮動之前：
CSS程式碼如下：
#a{background:#aaa;}
#b{float:right; width:200px;
background:#f00;}
#c{float:right; width:200px; background:#777;}
左右兩側定寬，中間自適應：
這個佈局應該是用得最多的，因為兩邊側側邊欄的定寬，然後中間內容區自適應，這是許多網站常用的佈局方式。很多人會在這裡使用四個DIV來完成佈局，即：
透過一個嵌套的DIV來幫助完成三列浮動，這樣的確是可以完成浮動佈局的目的，但是不用這個嵌套仍然可以完成三列浮動的目的，既然可以省略一個嵌套，那為什麼不省略一個呢？只要改變b跟c兩者的順序即可達到目的：
CSS程式碼如下：
#a{float:left; width:200px; background:#aaa;}
#b{margin-left :200px;
margin-right:200px; background:#f00;}
#c{float:right; width:200px;
background:#777;}
這樣，在基於兩列浮動的基礎之上，三列浮動的佈局也完成了。
以上就是CSS版面之浮動（二）內容，更多相關文章請關注PHP中文網（www.php.cn）！
