css - 使用负边距时浮动重叠

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 使用正值，例如50pxbota和span被下推 50 像素并且不会相互重叠。

如果我对 margin-top 使用负值，比如说-50px，两者都被拉高了 50px，但它们也相互重叠。

为什么会发生这种情况，我该如何预防？

编辑，更多信息：

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

还有一个小提琴：http: //jsfiddle.net/xsSVX/

Answer 1

添加

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

给 div 一些额外的身体..

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