[解決済み] div に高さがないのはなぜですか？

質問

twitterのbootstrap cssフレームワークが使っているrow-columnメカニズムを真似しようとしています。

私は、いくつかの他のdivを含むdivを持っており、そのdiv自体がコンテンツを含んでいます。要素インスペクタでは、コンテナに高さがないように表示されています。div の高さは、それを含む要素の高さであるべきではないでしょうか？

<div class="container">
    <div class="row yellow">
        <div class="column-1 red">
            column-1
        </div>

        <div class="column-1 blue">
            column-1
        </div>

        <div class="column-1 green">
            column-1
        </div>

        <div class="column-1 orange">
            column-1
        </div>

        <div class="column-1 red">
            column-1
        </div>

        <div class="column-1 blue">
            column-1
        </div>

        <div class="column-1 green">
            column-1
        </div>

        <div class="column-1 orange">
            column-1
        </div>

        <div class="column-1 red">
            column-1
        </div>
    </div>
</div>

以下はjsfiddleです。

問題のHTML/CSS

どのように解決するのですか？

高さやコンテナの高さが0になる原因は、以下の通りです。 すべてのコンテンツをフローティングしている フローティングされた要素は、親の高さ（または幅）を拡張しません。

ですべてのエレントをフローティングしているので row は高さが 0 になり、そのため .container .

これを防ぐには、:

1. セット overflow:hidden; コンテナ上の デモ
2. でコンテナの末尾にあるブロック要素でフロートをクリアします。 clear:both; デモ

また、参考までにこちらの質問もご覧ください。 フロートされた要素の親要素が崩れないようにするには？