這裏是根據精通css書籍總結的，這裏介紹了如何利用浮動進行兩列和三列布局！當然，兩列布局以及三列布局還有其他的方式來實現，比如css3中的多列布局，以及利用table等...

　　基於浮動的布局：

　　利用浮動進行布局，這應該是最簡單的方式了，雖說進行浮動有時候對於IE某些元素不是天生擁有布局，會存在一些潛在的BUG，但是通過一些解決方法可以做到更好的跨瀏覽器兼容效果。在基於浮動布局中，只需要設置元素的寬度，再將它們左右浮動即可達到布局效果。但是，有一點值得註意，就是由於浮動元素不占據文檔流中的布局，因此需要進行浮動清除；對於這個問題，有幾種解決的方式，這裏僅利用給父元素添加overflow:hidden；方法（關於如何清理浮動，之後有一篇博文專門總結常用三種清除方法）。

　　一、兩列浮動布局

　　如下圖所示：

其HTML布局為：

 1 <div class="wrapper">
 2 
 3         <div class="header">
 4             <!-- Your header content goes here -->
 5         </div>
 6 
 7         <div class="content">
 8             <div class="primary">
 9                 Main content goes here
 
10             </div>
11 
12             <div class="secondary">
13                 Navigation and secondary content go here
14         </div>
15 
16         </div>
17 
18         <div class="footer">
19             <!-- Your footer content goes here -->
20         </
 
div>
21 
22 </div>

其樣式為：

 1         /* 註意IE5/6的混雜模式並不支持margin:0 auto;規則，但是可以利用        
 2         text-alignIE特有的功能 */
 3 
 4         body {
 5             text-align: center;
 6         }
 7 
 8         .wrapper {
 9             width: 920px;
10             margin: 0 auto;
11             text-align: left;
12             border: 1px solid #000;
13         }
14 
15         .content {
16             overflow: hidden; 
17         }
18 
19         .content .primary {
20             display:inline;
21             width: 650px;
22             padding-right:20px;
23             float: right;
24             /* border: 1px solid #000; */
25             height: 200px;
26         }
27 
28         .content .secondary {
29             display: inline;
30             width: 230px;
31             height: 200px;
32             float: left;
33             /* border: 1px solid #000; */
34         }

　　註意：這裏有幾處涉及了跨瀏覽器兼容性以及對於老版本IE的一些DEBUG，比如：IE6以及早期版本混雜模式不支持margin: 0 auto;因此，解決方案為：利用IE特有的對於text-align屬性的功能，使得所有的元素以及文本都居中對齊（而對於現代瀏覽器來說，text-align:center 只能使得文本居中）。再如：IE6以及早期版本瀏覽器對於浮動元素產生的雙外邊距浮動的bug，可以通過將元素的display:inline;來解決。

　　二、三列浮動布局

　　三列布局和兩列布局相似，只不過就是再嵌套子元素。

　　如下圖：

其HTML為：

 1 <div class="wrapper">
 2         <div class="header"></div>
 3         <div class="content">
 4             <div class="primary">
 5                 <div class="primary">
 6                     1.1
 7                 </div>
 8                 <div class="secondary">
 9                     1.2
10                 </div>
11             </div>
12             <div class="secondary">
13                 2.0
14             </div>
15         </div>
16         <div class="footer"></div>
17 </div>

其css樣式為：

 1 body {
 2             text-align: center;
 3         }
 4 
 5         .wrapper {
 6             width: 920px;
 7             margin: 0 auto;
 8             text-align: left;
 9         }
10 
11         .content {
12             overflow: hidden;
13         }
14 
15         .content .primary {
16             width: 668px;
17             float: right;
18             display: inline;
19             height: 198px;
20             border: 1px solid #000;
21 
22         }
23 
24         .content .secondary {
25             width: 228px;
26             float: left;
27             display: inline;
28             height: 198px;
29             border: 1px solid #000;
30         }
31 
32         .content .primary .primary {
33             width: 398px;
34             float: left;
35             display: inline;
36             border: 1px solid red;
37             height: 196px;
38         }
39 
40         .content .primary .secondary {
41             width: 228px;
42             float: right;
43             padding-right:20px;
44             display: inline;
45             border: 1px solid red;
46             height: 196px;
47         }

基於浮動的布局