Paul_o_b - 4:59 pm on Jul 29, 2011 (gmt 0)
It's a very old firefox bug I believe and the top margin of the p element collapses onto its parent and then onto the main parent #bg and gives the gap you see.
In the "olden days" when we used to use empty clearer divs we would also add a height of 1px to the clearer div to stop the margin collapse effect in gecko (and then add a negative margin of 1px to offset the height. (In older gecko (<ff2) empty clearer divs would not actually clear anyway unless they had a height or content.)
Indeed even when "clearfix" came along you will notice that a full stop was added into the code which stopped this issue.
Without that full stop then even the modern clearfix methods fails in the situation above (it seems the dot has been mislaid in the new clearfix version as it has just empty content and won't stop the margin collapse bug).
In fixed width layouts then the overflow:hidden (and haslayout for old IE) is best and easiest to use unless you want visible overflow. If you use the clearfix method then make sure you add the dot into the content property but you may find that in some circumstances this creates a little extra space at the bottom.
I would never use an empty div for clearing these days though as it is just too messy.