On first looks it might be a case of collapsing margins (quite a complex topic on it's own: [w3.org...] ) but since there is only one margin involved, that's not going to be the case here.
So what's going on? (in standards compliant browser, keeping IE out of the picture as it tempts logic all the time)
Your outerbox (red border) gets no height cause there are no children that remain in the flow (they are all floated).
The nextbox (with it's clearance it has) needs to be under the floated boxes, but there is no problem in overlapping the margins under the floated items.
Floated elements don't push aside margins, they push aside content.
Now IE6 and IE7 suffer from a broken box model and whatnot, no surprise they get it different from all other browsers.
IE8 was supposed not to have these deviations anymore, and my copy renders it the same as Firefox (and Safari, Opera etc.) unless I press the "as broken as IE7" button.
Most out here would use padding instead of margins, but there are plenty of other solutions, just don't stare yourself blind on how legacy IE versions render things.