4

unordered-list要素をフロートさせた瞬間...背景色が失敗します。なんで？

<style type="text/css">

    .bkgrd-blue { background-color: #094AB2; }

    .application-bar { color: #FFFFFF; }

    .application-bar ul { }
    .application-bar ul.control-bar { list-style: none outside none; margin: 0; overflow: visible; padding: 0; }

    .application-bar ul.control-bar.branding { float: left;}
</style>

<div class="application-bar bkgrd-blue">
    <ul class="control-bar">
        <li>
            This is working!
        </li>
    </ul>
</div>

<div class="application-bar bkgrd-blue">
    <ul class="control-bar branding">
        <li>
            The moment I float this...it fails! Why?
        </li>
    </ul>
</div>
4

3 に答える 3

4

要素をフローティングすると、通常のドキュメントフローから要素が削除されるため、コンテナは拡張されません。つまり、コンテナのdiv高さは0になります。

これを修正するには、フロートをクリアする必要があります。次のいずれかを実行できます。

  • overflow: hiddenに設定div
  • フロートdiv
  • フロートリストの後に要素を追加します-これは疑似要素clear:bothを使用して行うことができます:after

これが最初のソリューションを使用したデモです：http：//jsfiddle.net/FSH4Y/

追加した：

.application-bar {
    color: #FFFFFF;
    overflow: hidden;
}

この問題に関する詳細情報は次のとおりです。CSSの秘訣：フロートのすべて-TheGreatCollapseというセクションをご覧ください。

于 2012-12-21T14:52:31.260 に答える
1

リストの下をクリアする必要があります。通常、私は次のようなdivを追加します。

<div style='clear:both;'></div>

これにより、フロートされた要素の親がその高さを適切に計算できるようになります。

于 2012-12-21T14:47:04.623 に答える
0

含まれているdivも背景とともにフロートする必要があります。内側のulをフロートさせるとすぐに、含まれているdivには実質的にコンテンツがないため、高さは0になります。

于 2012-12-21T14:46:52.903 に答える