フロートした要素に続くリスト

通常フロートした要素とデフォルトの文書フローで配置された要素は重なります。CSS 2.1仕様書のフロートの解説にある図Dがその例です。なので、通常フロートした要素に続くリストはそのブレット(や数字等)がフロートした要素の下に隠れてしまいます。この挙動には結構困らされることが多いですが、実はoverflow: autoとすると簡単に回避できます。

Demo: ul after floated element

デモのようにリストにoverflow: autoするだけで、キレイにリストが配置されるようになります。overflow: autoを使った場合と使わなかった場合でどう重なりに違いが出るかわかるように、outlineプロパティーでピンクの線を引いておきました。

これはブラウザの挙動がたまたまそうなったということではなく、実にさり気なくCSS 2.1仕様書にも記述があります。

The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself.

この一文がそれで、荒く訳すとoverflowプロパティーでvisible(デフォルト値)以外を指定されていた場合は重なってはいけないと規定されています。なのでoverflow: autoなどvisible以外にするとうまいことリストが配置されるようになるわけです。

overflowプロパティーをいじっているので、それに影響を受けるwhite-spaceプロパティー等との兼ね合いは意識しないとなりませんが、覚えておくとごく稀に便利です。