ブロック要素のサイズを、内部のfloat要素の大きさに合わせて自動で変えるには

HTMLで、float要素を内部に持つブロック要素を書く。

  <div style="border:1px solid black; width:400px; height:auto;">
    <p style="border:1px solid black; width:50px; height:80px; float:left;">
    </p>
    <p>
      FirefoxやSafariだと、枠の下に突き出る。
    </p>
  </div>

このときFirefoxやSafariだと、内部のfloat要素(<p>)がブロック要素(<div>)の下に突き出てしまう。

FirefoxやSafariだと、枠の下に突き出る。

IEやOperaなら、突き出ない。どうやらブロック要素の高さを自動で調整してくれるようだ。

FirefoxやSafariでも突き出ないように、ブロック要素の高さを自動で変えたい。
CSSのプロパティを変えて色々試してみたら、overflowプロパティにhiddenなどを設定すると、ブロック要素の高さが自動で変わってくれる事が分かった。

  <div style="border:1px solid black; width:400px; height:auto; overflow:hidden;">
    <p style="border:1px solid black; width:50px; height:80px; float:left;">
    </p>
    <p>
      枠の下に突き出ない。
    </p>
  </div>

枠の下に突き出ない。

なんか不思議な動きな感じもするが、とりあえず問題は解決。

ちょっと調べてみたら、同じような事を解説している記事を見つけたので、リンクしておきます。
CSS - Clearing floats