css/float指定したボックスの背景が出なくなる件 - kobapan @ wiki

#body {
    background-color: #B4D543;
}
 
#container {
    overflow: hidden;
    background-color: #FFFFFF;
}
#container:after {
    content: "";
    display: block;
    clear: both;
    height: 1px;
    overflow: hidden;
}
/* バックスラッシュハックと、スターハックを用いてWinIEハック */
/*\*/
* html #container {
    height: 1em;
    overflow: visible;
}
/**/
 
.leftBox {
    width: 45%;
    float: left;
}
.rightBox {
    width: 45%;
    float: right;
}
 

floatはボックスを"浮かせる"ものなので、内側のボックスが全部浮かんでしまった場合、外側のボックスの高さはなくなってしまう

overflow: hiddenを使用すると外側のボックスの高さがフロートした内側のボックスの高さによって拡張する

:afterにcontentを指定すると、ボックスの中の一番最後に新たなテキストや画像を挿入することができ、挿入したものをブロック要素化し"clear: both"をかけることによってボックス内のfloatをすべて解除することができる。すると、floatしているボックスの高さに応じて外側のボックスの高さが拡張されるようになる。（Firefox、Opera、Safari）

高さ指定を入れることでIE7で外側のボックスの高さをフロートした内側のボックスの高さに合わせて拡張する、高さ1emより溢れる内容が隠れないようにvisible指定（WinIEハックの部分）