使用负边距时，浮动元素会重叠

Question

这是标记：

<div>
    <a href="google.com">my link</a>
    <span>Testing content.</span> 
</div>

并且CSS：

div > * {
    float: left;
    margin-top: -50px;
}

div{

    margin-top:200px;
}

注意：div仅用于演示目的，将所有内容下移以便我们可以看到它们。

如果我为margin-top使用正值，例如50px，则a和span都向下推动50像素，不重叠。

如果我为margin-top使用负值，例如-50px，则两者都向上拉50px，但它们也重叠在一起。

为什么会发生这种情况，如何防止它？

编辑，更多信息：

- 不幸的是，我不能将a或span放在包装器中。 - 我需要保留浮动，因为我需要重新组织流程。 - 我需要将a和span向上推。

还有一个fiddle: http://jsfiddle.net/xsSVX/

- F21

---

你想要它是什么样子的？我第一次理解是将float去掉并将它们变为内联。但那可能不是你想要的。 - joshp

我必须保留浮动元素，因为我需要重新组织文档的流程。然而，如果你给它们一个正外边距50px，你会看到浮动元素被推下来，不再重叠。在我的情况下，我只需要能够使用负外边距而不让这两个浮动元素重叠，或者以某种方式将它们向上推动，而不依赖于一个包裹元素。 - F21

Answer 1

新增

div > * {
    float: left;
    margin-top: -50px;
    padding-bottom: 40px;
}

给 div 添加一些额外的样式。 http://jsfiddle.net/xsSVX/6/

- Ryan

---

这似乎起作用了。你能解释一下为什么需要“额外的body”吗？ - F21

因为a和span是内联标签，所以它们没有HasLayout 链接。 - Ryan