186972 - Using clear: both; on block element and margin (margin-top) does not set margin to adjacent block elements

Status: VERIFIED INVALID

(Core :: Layout: Floats, defect)

Description

[Markus Fischer]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.3a) Gecko/20021212
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.3a) Gecko/20021212

The page uses three <div> tags with float: left; and one <div> tag (call it
footer) with clear: both; . If I now add a margin-top to the footer div (e.g.
25px;) the "footer" <div> is not moved away from the adjacent columns divs but
ALL <divs> are moved 25px; from the top of the page.

Suspecting a problem with clear: both; and margin-top .

Reproducible: Always

Steps to Reproduce:
1. Load the page in the browser

Actual Results:  
The "footer" <div> is next to the middle column <div>. All <div>s are moved from
the top down by 25px.

Expected Results:  
The "footer" <div> should be moved away from the middle column <div> by 25px; .

Comment 1

[Ruslan Ismailov]

I think it is not a bug, but a correct behaviour. Let us check manual:

http://www.w3.org/TR/REC-CSS2/visuren.html#q28.

There is stated, that: "If there isn't enough horizontal room on the current
line for the float, it is shifted downward, line by line, until a line has room
for it". "Clear: both" is still flowing element, so if you put margin-top: some
value on it, you shift "floating line" for each element of flow.

It is mean, that all 4 you <div> elements are "linked" with this invisible
float-line, so put margin-top you put down this float-line.

Comment 2

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

The key point is in http://www.w3.org/TR/REC-CSS2/visuren.html#flow-control ,
which describes how 'clear' works.  It works by increasing the top margin of the
element being cleared so that it clears past all floats.  Thus this is correct
behavior.  (Note that if there is a bottom margin on the float you'll end up
with a gap.)

Marking as invalid, since this is not a Mozilla bug.

Comment 3

[Patrick]

v.