DIV布局之道四：clear:both清除DIV两侧浮动详解

我们要实现图中表格实现的效果，使用DIV+CSS该如何实现呢？

众所周知，要实现如上效果，我们写一个两行两列的表格，使得表格第二行两个单元格合并即可实现上图效果，可以使用如下代码实现：

XML/HTML Code 复制内容到剪贴板

1. <table width="303" height="151" border="1" align="center" cellpadding="1" cellspacing="0" bordercolor="#33CCFF">  
2.   <tr>  
3.     <td align="center">单元格一</td>  
4.     <td align="center">单元格二</td>  
5.   </tr>  
6.   <tr>  
7.     <td colspan="2" align="center">单元格三</td>  
8.   </tr>  
9. </table>  

上面代码仅仅使用了九行（如果不换行，也许三行即可，但是我们还是按照习惯计算行数）、相对简洁的代码就实现了这个效果，而且还没有使用到CSS就已经达到了布局效果，但是当我们使用DIV+CSS来布局该如何编写代码呢。

我们先将代码告诉访客：

CSS Code 复制内容到剪贴板

1. .clear{clear:both}   
2. .center_middle {text-align:center; vertical-align:middle; line-height:100px;}   
3. .contain {width:283px; height:210px; margin:0px auto; padding:0px 8px 0px 8px;}   
4. .box1 { float:left; width:139px; height:100px;  border:1px #33CCCC solid;}   
5. .box2 { float:left; width:140px; height:100px;  border:1px #FF9999 solid;}   
6. .box3 { width:281px; border:1px #0099CC solid; }  

HTML代码部分：

XML/HTML Code 复制内容到剪贴板

1. <div class="contain">  
2.     <div class="box1 center_middle">盒子一</div>  
3.     <div class="box2 center_middle">盒子二</div>  
4.     <div class="clear"></div>  
5.     <div class="box3 center_middle">盒子三</div>  
6. </div>  

我们预览一下效果：

上例中，我们看到多余了一对标签：<div class="clear"></div>，这一行代码所起的作用就是“清除两侧浮动”，我们知道，盒子一与盒子二都是左浮动（float:left; ），我们要在盒子一与盒子二下方添加一个盒子三，并且使得盒子三同时出现在盒子一与盒子二的下方，就必须要清除两侧浮动。

事实上，使用DIV+CSS达到上面效果，所需要的代码并不比表格少，甚至还要多，所以当有大量数据需要用表格处理的时候，我们还是建议使用表格布局。不要忘了，表格主要用于数据处理。

当页面布局不是很复杂的时候，我们还是建议使用DIV盒子模型来布局。