clear:both をなかなか思い出せなくて、検索をしていたら、「clearfixでfloatを解除 | d-spica」という記事を見つけました。最近はこういうテクニックがあるのですね。勉強になります。

clear:both をするために専用の要素を追加していたのを、CSSの機能で実現してしまうということで、次のようなclearfixというclassを用意して利用するとのこと。最後にある「* html .clearfix 」の指定はIEの古いバージョン対策だとのことです。

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}

「実践 Web Standards Design ~Web標準の基本とCSSレイアウト&Tips~」という書籍も良さそうです。