为什么 div 会有这样的行为？

有时我的 div 会出现这个问题，无法按预期运行。我想要的是让它们按照我的理解“流动”布局，但它们不是，我只是想知道为什么不。我已经使用 firebug 来检查 css，似乎没有任何不符合规范的内容，但它们并没有一个接一个地流动。

我提供了两组代码，一组在正确渲染的测试站点中，然后是有问题的页面。

div 代码：

<div style="border:solid 1px #c9c9c9; width:100px; height:100px; float:left;">
  sss
</div>
<div style="border:solid 1px #c9c9c9; width:100px; height:100px; left:20px; position:realtive;">
  2
</div>

Div 流动的图片：

Divs 不流动的图片

有人知道如何让他们按预期行事吗？值得指出的是，如果我在第二个 div 中放置一个 float:left ，这可以解决问题，但这意味着下一个 div 不会正确下降到下一行......

希望有人能帮忙，非常感谢

float只“剪切”文本，而不是框。而且你的图片都不是这些 css 属性的正确渲染。正确的渲染应该是两个框位于同一位置（重叠），“sss”位于边框内，“2”位于底部边框下方。

Using float:left;两个 div 都应该照顾好它。

<div style="float:left;">sss</div>
<div style="float:left;">2</div>
<div style="clear:both;">the next div</div>

如果某些内容在浏览器中出现问题，请确保使用具有通用默认 CSS 的文档类型，例如 xhtml 1.1。否则，您可能希望为所有元素生成默认样式表。