css实现浮动错位,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 错位实例

左边

• 文章列表1
• 文章列表2
• 文章列表3

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

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

图1

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

图2