Html 如何使CSS浮动与表重叠？

如何使浮动元素与表重叠？它与其他div重叠得很好，但该表似乎强制清除

在我的示例中，div是重叠的（我想要的），但下面的表清除了浮动元素（我没有）

这里的示例：。（这个好像是油炸的，我也要贴在这里。）

HTML:

您可以获得如下所示的功能：

<div style="position:relative">
  <span style="position:absolute;right:0;width:40%;">
    content content content content content
    content content content content content
    content content content content content
  </span>
  content content content content...
</div>


内容内容
内容内容
内容内容
内容内容。。。

看。看起来table display清除了所有浮动（从我运行的所有测试中）。我建议使用上述解决方案来实现这一结果，而不是使用浮点数。
我不确定这是否正确，但给出您的表
显示：block
足以使它按您希望的方式工作

您可以通过编辑示例中的样式来测试这一点。
您尝试过负边距吗？？？@Josiah Ruddell:您的示例是有效的，但我认为您的理由是错误的，否则第二个也会清除，对吗？似乎它只适用于相对定位，而不是浮动…@Scott Stafford-是的。这很有趣。我试了一些东西。1.）使表格显示块-无变化。2.）使div显示：表格-这使div的行为与表格相同。3.）向div中添加一个clear:tware-结果与display:table相同。显示为table的元素似乎会清除任何浮点。@Josiah，“display:block”就足够了。我不知道你为什么不这么想。@ANeves-在FireFox中这是真的。不适合webkit（chrome/safari）@Josiah啊，我明白了。。。良好的旧浏览器不一致性。：）谢谢这对chrome和safari没有影响。考虑到@Josiah的宝贵投入，我用chrome进行了检查。我无法找到用浮动元素重叠表的方法。我倾向于说这是Chrome处理表格的方式的一个缺陷，但我对CSS太生疏了，不能这么说。我在CSS2中找不到任何东西可以解释这种行为：(
table {
 width:300px;
 border: 1px solid black;
}
span {
 border:2px solid black;
 background-color: #ddd;
 margin: 2px solid gray;
}
div {
 border:2px solid black;
 background-color: #fff;
 margin: 2px solid gray;
 width: 200px;
 padding: 10px;
}

<div style="position:relative">
  <span style="position:absolute;right:0;width:40%;">
    content content content content content
    content content content content content
    content content content content content
  </span>
  content content content content...
</div>