div右边的div与其重叠（显示错位）

　　在排版布局网页时，一行常常分为两列或三列，由于是一个大区块，所以经常使用div来布局，也就是每列用一个div。假如把一行分为两列，一列用于显示文字列表，另一列用于显示图片列表，图文搭配比较好看；在用div布局的时候可能会出现这么一种情况：第二列的div会与第一列的div重叠，即div右边的div与其重叠，也就是第二列的div显示错位了。

　　为什么会出错位这种情况？这与CSS的定义有关，也有浏览器的版本有关，在一些版本的浏览显示正常，在另一些版本的浏览器显示错位；浏览器我们无法控制，但可修改CSS，让右边的div在所有浏览器显示都正常。

　　一、div右边的div与其重叠（显示错位）的原因

　　为便于理解，先举一个左右边div重叠的例子，htm代码如下：

　　<div class="lifeDiv">左边div</div>
　　<div class="rightDiv">右边div</div>

　　CSS样式：

　　.lifeDiv{float:left; width:300px; height:360px; border:1px solid #ccc; padding:6px; overflow:hidden;}
　　.rightDiv{width:300px; height:360px; border:1px solid #ccc; padding:6px; margin-left:10px;}

　　效果图（错位）：

　　从图中可以看出，右边的div与左边的div重叠在一起，原因其实很简单，分析CSS样式即可找到答案。左边的div CSS样式定义为浮动，而左边的 div CSS 样式却没有定义为浮动，所以它们重叠在一起，只需要把右边的 div 也定义为浮动，右边的 div 就会回到右边，与左边的 div 并排在一起。

　　二、div右边的div与其重叠（显示错位）的解决办法

　　CSS样式修改为：

　　.rightDiv{float:left; width:300px; height:360px; border:1px solid #ccc; padding:6px; margin-left:10px;}

　　效果图（正常）：

　　从图中可知，左右div已经并排在一起，显示回归正常。