当使用负边距时浮动重叠

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。

小提琴：http://jsfiddle.net/xsSVX/

Answer 1

添加

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

给div一些额外的身体..

http://jsfiddle.net/xsSVX/6/