css - 右浮动跨度似乎不在父 div 中

Question

我正在尝试在我的消息栏中 float 一个跨度。由于某种原因，在我的网页上，正确的 float 范围在视觉上显示在 div 下方。在 JS fiddle 中它看起来不错。是什么将它压低了？

示例:http://jsfiddle.net/g6wWB/

HTML:

<div class="msg">
    Some thext here
    <span class="goright">Close</span>
</div>

CSS:

.msg {
    background-color: green;
}

.goright {
    float:right;
}

Answer 1

我相信这只是 IE7 及以下版本的问题，因为内容本身会将 float 元素向下推。在现代浏览器中，不应将其下推。但要解决此问题，请将 float 跨度放在内容之前。

<div class="msg">
    <span class="goright">Close</span>
    Some thext here
</div>