css-float - 为什么 Firefox 以不同方式显示我的页面？

Question

我完全无能为力，无法清楚地描述我的问题，所以我试图在这里尽可能简单地制作一个 jsfiddle:http://jsfiddle.net/Emf2f/ .在 Chrome+IE 上，我的图像在#div3 下，而在 Firefox 上，我的图像在#div3 旁边。为什么会这样？哪个结果更“标准”？

<div id="div1">
    <div id="div2">
        <div id="div3"> Text </div>
    </div>
    <img src="http://img805.imageshack.us/img805/758/txgo.jpg" />
</div>

#div1{
    width:500px;
    overflow:auto;
    border:1px solid red;
}
#div2{
    margin-bottom:-1px;
}
#div3{
    background:cyan;
    float:left;
    width:200px;
    height:100px;
}

Answer 1

我会在您不希望图像与其内联显示的对象周围使用“清除”。您可以在此处阅读有关定位的更多信息:http://w3schools.com/css/css_float.asp

网站上有您要完成的确切示例。

我将您的图片添加到一个 div 标签 (div4) 中，然后将 clear:both 放在该 div 的 css 文件中，它在 Chrome、IE 和 FF 中正常工作。

div4{Clear:both;}

如果这有帮助，请告诉我。谢谢。