以下のようなfloat要素を内包するdivタグの場合、高さ(縦幅)は「0」である。
よって、背景色を指定しても表示されない。
┌──────────────────────────────────────┐
│<div style="background-color:#FF0000;">                                     │
│<div style="float:left;height:1em;width:1em;"></div>                        │
│</div>                                                                      │
└──────────────────────────────────────┘
通常は、内包する要素によって外側も拡げられるものだが
float要素の場合は、内包とはいっても浮いてる感じなので
外側としては最低限の大きさしか持たない状況になる。

で、これを解消して、外側のdivタグにも高さや横幅を持たせる方法。
以下のいずれか。

(1) 外側のdivタグに「overflow:hidden;」を持たせる
┌──────────────────────────────────────┐
│<div style="overflow:hidden;background-color:#FF0000;">                     │
│<div style="float:left;height:1em;width:1em;"></div>                        │
│</div>                                                                      │
└──────────────────────────────────────┘
「overflow:auto;」「overflow:scroll;」でも大丈夫。
既定の「overflow:visible;」がダメなようだ。

(2) clear要素を最後につける
┌──────────────────────────────────────┐
│<div style="background-color:#FF0000;">                                     │
│<div style="float:left;height:1em;width:1em;"></div>                        │
│<div style="clear:both;"></div>                                             │
│</div>                                                                      │
└──────────────────────────────────────┘
「float:left;」向けの「clear:left;」、
「float:right;」向けの「clear:right;」もあるが、
両方兼ねる「clear:both;」が便利。

(3)after疑似要素を使う
┌──────────────────────────────────────┐
│<div style="background-color:#FF0000;" class="■">                          │
│<div style="float:left;height:1em;width:1em;"></div>                        │
│</div>                                                                      │
├──────────────────────────────────────┤
│.■:after {                                                                 │
│    content             :"";     /* after疑似要素の必須項目 */              │
│    display             :block;  /* after疑似要素の必須項目 */              │
│    clear               :both;                                              │
│}                                                                           │
└──────────────────────────────────────┘
モダンブラウザ(この場合はIE8以降)であれば、
clear要素のタグをわざわざ作らなくとも、CSS上で制御できる。
「content」の指定がないと効かないので、ダミーで「""」でも指定しておく。

(4) 外側のdivタグ自体を「float:left;」にして「width:100%;」にする
┌──────────────────────────────────────┐
│<div style="float:left;width:100%;background-color:#FF0000;">               │
│<div style="float:left;height:1em;width:1em;"></div>                        │
│</div>                                                                      │
└──────────────────────────────────────┘
ちと強引すぎるが、こういう方法もあるよということで。