html - Div は、フロートされた子の合計の高さほど高くありません

Question

OK、float プロパティの動作を理解するのに本当に問題があります。

ページの幅は 750 ピクセルです。画面の中央に配置するために、次のコードを使用しました。

<div align="center">
    <div align="left" style="width:750px; border-style:double;">
        stuff
    </div>
</div>

メインの 750 ピクセル幅のコンテナー内の要素は、次のスタイルを持つ他のコンテナーです。

div.infoCont //these containers usualy have two more containers within- for an image and text
{
    width: 740px;
    position: relative;
    left: 2px;
    border-style: double; //for debugging
    float: left;
}
div.textContNI //text only
{
    width: 730px;
    float: left;
    clear: right;
    border-style: double; //for debugging
}

小さなコンテナーは通常どおりに動作します (コンテナーは配置され、希望どおりの大きさであるため、正常に動作するはずです)。しかし、メイン コンテナの高さは、小さいコンテナの合計の高さよりもずっと小さい... 0 ピクセルです。すべての小さいコンテナの高さは無視されます。

これは、メイン コンテナの終了タグの直前にテキストを追加することで「修正」できます。タグを付けてテキストなしで高さを操作することもでき<br>ます。高さは境界線の高さの合計と同じになります。問題を「修正」する別の方法はfloat:left;、スタイルを追加することですが、それはコンテナをウィンドウの左側に配置しますが、それはできません。

何かが欠けていて、それが何かわかりません。

メイン コンテナがその中のコンテナの合計の高さを無視するのはなぜですか? また、このバグに対処するにはどうすればよいですか?