css ie6 float 错位，图片太大导致div不浮动在右边

　　用 css 修饰网页，ie6 跟 ie8、9 这些新版本的浏览器有比较明显的区别，例如：设置了 float:left，ie8 可以浮动，ie6 未必须可以，还需加一些属性才行；设置 div 的边框，ie8、9 不用设置高度，而 ie6 不设置高度却框不住 div 的内容；如果图片尺寸宽度大于所在div 的宽度，ie8、9 会自动庶盖大于 div 宽度的部分，而 ie6，div 直接错位不浮动于它左边 div 的右边。

　　css ie6 float 错位也有规律可循，下面先总结 ie6 css 错位的一般规律及解决办法，再介绍一些具体实例。

　　一、ie6 css 错位的规律及解决办法

　　1、缺少 overflow:hidden 属性（一般是父层），可能导致（浮动）错位。

　　2、缺少 width 属性，ie6 通常都要设置 width 属性，否则可能引发错位。

　　3、图片宽度大于所在标签（div）的宽度，则该 div 错位而不能浮动于它左边 div 右边。

　　4、ie6 宽度值（width）要小于 ie8 的宽度值，因为 ie6 margin 是双倍边距；当然，也可以加 display:inline 属性解决。 　　

　　二、ie6 css 错位实例

　　<div class="left">左边</div>
　　　　<div class="right">
　　　　　　<ul>
　　　　　　　　<li>文章列表1</li>
　　　　　　　　<li>文章列表2</li>
　　　　　　　　<li>文章列表3</li>
   　　　　</ul>
　　　　<div><img src="/images/jn.jpg" alt="ie6 css 错位" /></div>
　　</div>

　　Css 样式：

　　<style type="text/css">
　　　　body{width:950px; margin-left:auto; margin-right:auto; font-family:Verdana,Arial,"宋体",sans-ser; font-size:14px;}
　　　　.left{width:640px; float:left; margin-right:10px;}
　　　　.right{width:298px; float:left; border:1px solid #ff0; overflow:hidden;}
　　</style>

　　右边 div 的宽度是 298，如果图片 jn.jpg 的宽度大于 298，又没有在 css 样式 .right 中加 overflow:hidden; 属性，则 ie6 错位而不能浮动在“左边”div 的右边，如图1所示：

图1

　　在 .right 中加上 overflow:hidden; 属性，或者把图宽度改为298，显示正常，如图2所示：

图2