通常フロートした要素とデフォルトの文書フローで配置された要素は重なります。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
プロパティー等との兼ね合いは意識しないとなりませんが、覚えておくとごく稀に便利です。