css - 右のフローティングスパンが親 div にないようです

Question

メッセージバーにスパンを浮かせようとしています。何らかの理由で、私の Web ページで右のフローティングスパンが視覚的に div の下に表示されます。JSフィドルでは問題ないようです。何がそれを押し下げているのでしょうか?

HTML:

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

CSS:

.msg {
    background-color: green;
}

.goright {
    float:right;
}

score 4 · Accepted Answer

これは、コンテンツ自体がフローティング要素を押し下げている IE7 以下でのみ問題になると思います。最新のブラウザーでは、プッシュダウンしないでください。しかし、この問題を解決するには、フローティングスパンをコンテンツの前に置きます。

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

score 0 · Accepted Answer

の配置を完全に制御したい場合の別の解決策として、span絶対配置を使用する方法があります。

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

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

このようにすると、コンテンツの量や div 内の要素の順序に関係なく、押し下げられることはありません。

css - 右のフローティング スパンが親 div にないようです