我目前知道两种基于CSS的三栏布局方式。第一种叫“嵌套”，第二种叫“挤压”。（名目都是我自己编的）

1. 嵌套。这个简单，大部分三栏布局都用这个，我想。就是两个div（AB和C），在其中一个中嵌上两个div（A和B）。

3-column-css-based-layout

CSS代码是：

  1. #AB { float:left; }
  2. #A { float:left; }
  3. #B { float:right; }
  4. #C { float:right; }
  5. .clear { clear:both; }

HTML代码是：

  1. <html>
  2. <body>
  3. <div id="AB">
  4.   <div id="A"></div>
  5.   <div id="B"></div>
  6.   <div class="clear"></div>
  7. </div>
  8. <div id="C"></div>
  9. <div class="clear"></div>
  10. </body>
  11. </html>

2. 挤压。这个也不难。先让A、C漂浮在左右两边，B左右Padding出A、C的宽度，这样B就把A、C挤到两边成为中间一栏了。需要注意的是，在HTML代码中，要先A、C块，再B块。

3-column-css-based-layout

CSS代码是：

  1. #A { float:left; width:200px; }
  2. #B { padding:5px 200px; }
  3. #C { float:right; width:200px; }
  4. .clear { clear:both; }

HTML代码是：

  1. <html>
  2. <body>
  3. <div id="A"></div>
  4. <div id="C"></div>
  5. <div id="B"></div>
  6. <div class="clear"></div>
  7. </body>
  8. </html>