为什么div会表现得像这样？

Question

我得到这个问题有时候我的div会不按预期行事。我想要的是让他们“流动”布局，因为我知道他们应该不是我只是想知道为什么不。我用萤火虫来检查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 of Flows的图片：

Div不流动的图片

有人知道如何让他们按预期行事吗？值得指出的是，如果我放一个浮点数：留在第二个div中，这就解决了问题，但这意味着下一个div不会正确地下降到下一行....

希望有人可以提供帮助，非常感谢

Answer 1

float只能“剪切”文字，而不是文字。并且您的所有图片都不是那些css属性的正确渲染。正确的渲染应该是同一个地方的盒子（重叠），边框内有'sss'，下边框下面是'2'。

在两个div上使用float:left;都应该处理它。

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

如果浏览器中的内容正在运行，请确保使用具有通用默认css的doctype，例如xhtml 1.1。否则，您可能希望为所有元素生成默认样式表。

Answer 2

Imho尝试将float添加到两个div，之后第三个div应为clear:both。

Answer 3

你可以让div的浮动向左，在元素或css的第3个div上使它“清除：两个”......

顺便说一下漂亮的图像：D你是怎么做到的，不管怎么说都不清楚。