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

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

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

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

<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>

我们预览一下效果：

上例中，我们看到多余了一对标签：

，这一行代码所起的作用就是“清除两侧浮动”，我们知道，盒子一与盒子二都是左浮动（float:left; ），我们要在盒子一与盒子二下方添加一个盒子三，并且使得盒子三同时出现在盒子一与盒子二的下方，就必须要清除两侧浮动。

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

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