web-dev-qa-db-ja.com

CSSコンテナdivが高さを取得していません

コンテナdivに、子の高さの最大値を取得させます。子divsの高さがわからない。 JSFiddle で試してみました。コンテナdivは赤です。表示されていません。どうして？

csscss-floatliquid-layout
113
Neel Basu

次のプロパティを追加します。

.c{
    ...
    overflow: hidden;
}

これにより、コンテナは、フローティング要素に関係なく、コンテナ内のすべての要素の高さを尊重します。
http://jsfiddle.net/gtdfY/3/

更新

最近、私はこのトリックを必要とするプロジェクトに取り組んでいましたが、オーバーフローを表示する必要があったため、代わりに擬似要素を使用してフロートをクリアし、すべての要素でオーバーフローを許可しながら同じ効果を効果的に達成できます。

.c:after{
    clear: both;
    content: "";
    display: block;
}

http://jsfiddle.net/gtdfY/368/

277
Nightfirecat

子を浮かせているのは、子がコンテナの前に「浮いている」ことを意味します。正しい高さを取得するには、フロートを「クリア」する必要があります

Div style = "clear：both"は、フローティングをクリアし、コンテナに正しい高さを与えます。 floatの詳細については、 http://css.maxdesign.com.au/floatutorial/clear.htm を参照してください。

例えば。

<div class="c">
    <div class="l">

    </div>
    <div class="m">
        World
    </div>
    <div style="clear: both" />
</div>
27
Yoeri

それほど簡単ではありませんか？

.c {
    overflow: auto;
}
19
Antonio Romero Oca

最後の</div>の前にこのクリアdivを挿入してください

<div style="clear: both; line-height: 0;">&nbsp;</div>

4
lee

最良かつ最も安全なソリューションは、::beforeおよび::after疑似要素をコンテナに追加することです。たとえば、次のようなリストがある場合：

<ul class="clearfix">
    <li></li>
    <li></li>
    <li></li>
</ul>

リスト内のすべての要素にはfloat:leftプロパティがあり、cssに追加する必要があります。

.clearfix::after, .clearfix::before {
     content: '';
     clear: both;
     display: table;
}

または、display:inline-block;プロパティを試すことができ、clearfixを追加する必要はありません。

2
Agata