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

Question

我正试图在我的消息栏中浮动一个范围。出于某种原因，在我的网页中，右侧浮动跨度在视觉下方显示在div下方。在JS小提琴它看起来不错。什么可能推低它？

示例：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及以下版本中的问题，其中内容本身正在推动浮动元素。在现代浏览器中，它不应该被推倒。但是要解决这个问题，在内容之前放置浮动范围应该有效。

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

Answer 2

如果您想要完全控制span的位置，另一种可能的解决方案是使用绝对定位。

.msg {
    background-color: green;
    position: relative;
}

.goright {
    position: absolute;
    right: 0;
    top: 0;
}​

这样，无论内容多少，或div内元素的顺序，它都不会被推下来。