clear:both清除DIV两侧浮动详解
我们要实现图中表格实现的效果，使用DIV+CSS该如何实现呢？
众所周知，要实现如上效果，我们写一个两行两列的表格，使得表格第二行两个单元格合并即可实现上图效果，可以使用如下代码实现：
<table width="303" height="151" border="1" align="center" cellpadding="1" cellspacing="0" bordercolor="#33CCFF">
<tr>
<td align="center">单元格一</td>
<td align="center">单元格二</td>
</tr>
<tr>
<td colspan="2" align="center">单元格三</td>
</tr>
</table>
上面代码仅仅使用了九行（如果不换行，也许三行即可，但是我们还是按照习惯计算行数）、相对简洁的代码就实现了这个效果，而且还没有使用到CSS就已经达到了布局效果，但是当我们使用DIV+CSS来布局该如何编写代码呢。
我们先将代码告诉访客：
CSS Code
.clear{clear:both}
.center_middle {text-align:center; vertical-align:middle; line-height:100px;}
.contain {width:283px; height:210px; margin:0px auto; padding:0px 8px 0px 8px;}
.box1 { float:left; width:139px; height:100px; border:1px #33CCCC solid;}
.box2 { float:left; width:140px; height:100px; border:1px #FF9999 solid;}
.box3 { width:281px; border:1px #0099CC solid; }
HTML代码部分：
XML/HTML Code复制内容到剪贴板
<div class="contain">
<div class="box1 center_middle">盒子一</div>
<div class="box2 center_middle">盒子二</div>
<div class="clear"></div>
<div class="box3 center_middle">盒子三</div>
</div>
我们预览一下效果：
上例中，我们看到多余了一对标签：<div class="clear"></div>，这一行代码所起的作用就是“清除两侧浮动”，我们知道，盒子一与盒子二都是左浮动（float:left; ），我们要在盒子一与盒子二下方添加一个盒子三，并且使得盒子三同时出现在盒子一与盒子二的下方，就必须要清除两侧浮动。
事实上，使用DIV+CSS达到上面效果，所需要的代码并不比表格少，甚至还要多，所以当有大量数据需要用表格处理的时候，我们还是建议使用表格布局。不要忘了，表格主要用于数据处理。
当页面布局不是很复杂的时候，我们还是建议使用DIV盒子模型来布局。