本文中所常涉及到布局混乱截图如下：

我们想要的效果图如下：

1：在网站布局时，常会用到如下布局：

<div id="Wrap">
<div id="Cont-1">
<div id="Box-1-1"></div>
<div id="Box-1-2"></div>
</div>
<div id="Cont-2">
<div id="Box-2-1"></div>
<div id="Box-2-2"></div>
</div>
</div>

我们目的是让DivBox-1-1和Box-1-2同排显示在Cont-1，DivBox-2-1和Box-2-2同排显示在Cont-2，但视觉上常常会发现Box-2-1也会跑到Cont-1里面去，尤其当我们在Css里对Box-1-1、Box-1-2、Box-2-1和Box-2-2进行float定义时，更发现如此。假如Box-1-1、Box-1-2都做了float定义，则其父DivCont-1是没有高度的，下面自然也就上去了，可以通过以下方式解决：定义Cont-1和Cont-2的宽度，并在Css里设置clear:both;就是清除两端的意思。
2：还有一种网站布局也常常会遇到这种情况，Xhtml代码如下：

<div id="Wrap">
<div id="Box-1-1"></div>
<div id="Box-1-2"></div>
<div id="Box-2-1"></div>
<div id="Box-2-2"></div>
</div>

本人不是很推荐这种，如果有条件可以改成第一种形式，对今后网站的维护很是方便。实在不行，你也可以这样改：

<div id="Wrap">
<div id="Box-1-1"></div>
<div id="Box-1-2"></div>
<div id="Br"></div>
<div id="Box-2-1"></div>
<div id="Box-2-2"></div>
</div>

在Css里读DivBr定义clear:both;就可以了，此Br的作用就是，强制两端的Div换行。