javascript - Div 要素の高さは自動的にゼロに設定されます

Question

私はかなり単純なレイアウトを持っています - 左に浮かぶメイン div。その中に、両方のスタイルをクリアした他の div をネストします。これは簡略化されたバージョンです（すべてのアイテムにサブディビジョンがあります）：

<div id="wrapper" class="floatLeft">
    <div id="mainMenu" class="clearBoth">
        <div id="item1" class="clearBoth">
        </div>
        <div id="item2" class="clearBoth">
        </div>
        <div id="item3" class="clearBoth">
        </div>
     </div>
 </div>

 .clearBoth {
      clear: both;
  }
  .floatLeft {
      float: left;
  }

問題は、item3 の高さが何らかの理由で 0 になるように計算されることです。その中のすべての要素がラッパー div に流出します。メイン メニューの div には背景などがあるため、見栄えが悪くなります。項目 3 に「overflow:hidden」のスタイルを追加すると、問題なく表示されます。なぜですか? なぜオーバーフローがあるのか​​ わかりませんか？ただし、最も重要なのは、item3 の高さが 0 と計算されるのはなぜですか?

これはjsfiddle http://jsfiddle.net/uPtCd/へのリンクです