cssのfloatで親要素の高さがなくなってしまった時の対処法

要素を回り込み表示させたい時にcssのfloatを使いますが、回り込みさせた要素の親要素に背景色や枠線をつけようとしたら思い通りのスタイルにならなかったことがありました。
そこで調べてみると、floatを使うと子要素が浮き上がるため、挟み込む子要素がなくなったことで、親要素は高さが失われることのようです。

親要素が高さを失わなければ、背景色や枠線が思い通りに表示できます。

その方法は、「親要素に高さを指定する」もしくは「親要素でoverflow:hidden;を指定」で解決することができます。
詳細はこちらを参照してください。