788566 - margin-top of an element following an empty element with clearance renders incorrectly

Status: RESOLVED DUPLICATE of bug 451791

(Core :: Layout: Block and Inline, defect, P2)

Description

[Ilya]

Attachment: The margin-top of the element following the element with 'clear' causes extra margin above it

The empty block element with 'clear: both' (which is one of the most popular solutions of the "containing floats" problem) causes the incorrect display when the block that follows the container of such element has 'margin-top'.

The demo of the bug is attached. In all browsers except Firefox (tested in version 15 on Windows 7 x86) the top gray block with floats and empty clearing div is rendered right after the top border of the parent block. But in Firefox it seems that the margin-top of the second (pink) block is somehow duplicated above the gray block, making the red background of the outer container visible.

When the div with 'clear' becomes nonempty (after adding content to it), and when it establishes new block formatting context (e.g. after adding 'overflow: hidden' or 'display:table' to its style), the bug disappears, so this can be used as a workaround.

But I believe that this bug should have high priority because the empty clearing div technique of containing floats is widely used on the Web.

Comment 1

[Alice0775 White]

Dup bug 451791