CSSで無理やりfloatをclearする方法

MozillaやFirefoxで
『親ボックスに背景画像や背景色を指定して
　子ボックスでfloatが行われている場合
　親ボックスの背景画像や背景色は
　floatが行われない子ボックスまでにしか反映されない』
という挙動があります。

図解するとこんな感じ


対応策としては親ボックスの次の要素に
'clear:both'を
適応させてfloatを解除すればいいのですが
'clear:both'を
適応させる為の要素が何も存在しない事があります。

そんな場合
親要素に対して以下のCSSを適応させることで解決します。

div#main:after {
  content : "";
  display : block;
  height : 0;
  clear : both;
}

通常だと空要素でもIEは解釈して空白の行を出力しようとしますが。
擬似要素afterやcontentなどのIEが解釈しないCSSで記述する事で解決できます。