clear
This property indicates which sides of an element’s box(es) may not be adjacent to an earlier floating box. The ‘clear‘ property does not consider floats in other block formatting contexts. Clearance is introduced as spacing above the margin-top of an element. It is used to push the element vertically (typically downward), past the float.
The height of the pink box is the same as the height of the floats, so the background of that box is hidden by the two other boxes. The content of the box overflows the container.
IE 6 and 7 display the three boxes as if the pink box was clearing the floats, but there is no "clearance".
Style the pink box with:
height: auto;