Floats overlap when using negative fields

Here's the markup:

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

And CSS:

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

div{

    margin-top:200px;
}

Note: the div is here only for demonstration purposes, to return all content so that we can see it.

If I use a positive value for margin-top, let's say the 50pxbot aand are spanreset to 50 pixels, and not overlap.

If I use a negative value for margin-top, let's say -50pxboth of them are pulled up by 50 pixels, but they also overlap.

Why is this happening and how to prevent it?

Change, additional information:

• Unfortunately, I can not put aor spanin the shell.
• I need to save the floats as I need to reorganize the stream.
• a span .

: http://jsfiddle.net/xsSVX/