どもです。
一人が楽しすぎる餅。です。

2014/10/09　当サイトの中でも特にアクセス数の多い記事のようなので、改正版に差し替えました。

 

floatが上手く行かないときは

取り敢えず回りこまされるコンテンツにoverflow:autoを設定します。
（imgとpがあってimgがfloatならpの方）

 

floatとはどのような状態か

floatを指定すると、続く要素を回りこませることができます。
このとき、親要素にはfloatの高さや幅は認識されなくなるので、clear:bothなどで回りこみを解除するか、回りこまされる要素がfloatの要素より大きくなるように設置しなければfloatの要素は親要素をはみ出ることになります。

親要素等に高さや幅の情報を認識されなくなるcssとしては、position:absolute（あるいはfixed）がありますが、こちらは要素が回り込まず、positionを設定した要素の下に潜り込みます。

が、このとき、回りこまされている要素がfloat状態でない場合、その要素の位置情報はposition:absoluteのときと同じです。

list-styleで設定したリストのマークや、before要素などは要素の頭の位置を基準に表示されるので、上図の場合はマークやbeforeが表示されない状態になります。

あるいは、当初この記事を書いたときの状況では回りこませる要素が半角で改行なしの場合だと、回りこんでくれないこともあるようです。

 

overflow:autoを設定したらどうなるのか

overflowを設定すると、flowした要素の位置情報が認識されるようになります。

値はauto以外にも、scroll・hiddenでも大丈夫です。
hiddenは、はみ出たコンテンツを容赦なく消すため、取り敢えずautoを使うことをお勧めします。
しかしautoやscrollだと内部のcssの設定次第でス要らないクロールバーが出てしまうこともあります。
その場合はoverflow:hiddenに設定したほうが良いでしょう。

但し、ブロック要素は「ブロック要素のまま」回りこまされるので、floatの要素が終わっても回りこみは解除されません。
サイトの状況によっては、やり方を考慮する必要がありそうです。