web-dev-qa-db-ja.com

ネストされたフローティングdivを含む親divの高さを成長させる

浮いている子divsに基づいて親divの高さを自動成長させることはできません。すべての子は、水平方向にスペースを取り、次の行に折り返すために浮いています。変動する子の数は変化する可能性があり、親はその高さを自動サイズ調整する必要があります。 （親divは、すべての浮動divsの背景として機能します）。また、プッシュダウンする必要がある親divの下に2番目のdivがあるため、フローティングdivsの下にあります。

ソリューションがIEで機能することは非常に重要です。

htmlcssstyles
46
Louis van Tonder

親コンテナに浮動子のみがある場合、高さはありません。次のCSSを親コンテナに追加すると役立ちます。

.parent {
    overflow:hidden;
    width: 100%;
}

詳細については、この記事をお読みください： http://www.quirksmode.org/css/clearing.html 。

101
sandeep

最後の子の後にフローターをクリアするdivを挿入できます。

HTML：

<div style="clear: both"></div> <!-- This goes after the last floated element - no floating elements are allowed on either side of this. -->

フィドル： http://jsfiddle.net/Rc5J8/

50
Andreas Eriksson

親の高さが折りたたまれるclearフローティング要素が必要です。

現在受け入れられている答えは正しいですが、通常、ラップする親要素に clearfix hack またはoverflow: hiddenを適用して、マージンが期待どおりに機能し続けるように、フロートをクリアすることをお勧めします。空のHTML要素を取り除きます。

overflow-メソッド：

CSS：

.wrap { overflow: hidden }
.box  { float: left; }

マークアップ：

<div class="wrap">

    <div class="box">
        Content
    </div>

    <div class="box">
        Content
    </div>

</div>

上記にリンクされているclearfix-メソッド：

CSS：

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after { clear: both; }
.cf { *zoom: 1; }

.box { float: left; }

マークアップ：

<div class="wrap cf">

    <div class="box">
        Content
    </div>

    <div class="box">
        Content
    </div>

</div>
12
Nils Kaspersson

含むdivでclearfixテクニックを使用する必要があります

http://www.webtoolkit.info/css-clearfix.html

これにより、余分なマークアップを追加する必要がなくなります。

3
Adam Pope

親要素にoverflow cssプロパティを追加すると、問題が修正されます（フロートをクリアするための空の＆ugいdiv要素は不要です）：

.parentelement {
    overflow:auto;
    display: block;
    width: 100%;
}

一部のブラウザではこれらのプロパティを定義する必要があるため、displayおよびwidthプロパティを追加しました。

3
Chtiwi Malek

ドキュメントのフローからフロートが削除され、親のコンテンツに高さが自動的に追加されないように、親にclearfixを適用する必要があります。 Clearfixは、最後にフロートした子をクリアするのに十分な高さまで親が伸びるように指示します。 この方法 は十分に確立されており、ブラウザー間で機能します。

1
wheresrhys