CSS clearance computation
In the two three columns below ('no clear', 'clear', 'reference') there is a series of test cases. Each is wrapped in a container with gray horizontal lines in the background, with top/bottom borders to avoid margins escaping, floated to ensure float enclosure. The 'real' test cases are in the second column. The first one is like the second, but without the use of the 'clear' property. The third one is a sort of reference rendering (not using clear; obtained with a combination of different margins, removal of the float property, ...).
Common elements to all test cases:
- The blue 20 × 20 box is a left float, called F in the following.
- A red box, called R, follows F. It has clear:left applied in the second column.
- R is sometimes empty or, better, it is 'collapsed through'. In these cases an inner absolutely positioned red line tries to show its position.
- F and R are wrapped (in most of the cases) by a green box, called P in the following. Cases where P is not present are explicitly noted.
Further properties and elements are listed for each test case in the 'description' column.
The last column describes briefly the behavior of Fx 3.6 and Safari 4.0.4, and what should happen. Opera 10, IE8 are not mentioned at the moment, their behavior is different (presumably wrong) in many cases.
The position of R in the 'no clear' column is in most cases the 'hypotetical position' of 9.5.2. Not always, because the 'hypotetical position' explicitly excludes some margins, when R is 'collapsed through': R bottom margin and margin from subsequent siblings. The specs are not clear about adjoining margin of the first inflow R's child.
no clear
clear
reference
description
comments and behavior of Fx 3.6 and Safari 4.0.4
1a R has margin-top: 10px
clearance 10px
1b R has margin-top: 20px
clearance needed but 0
1c R has margin-top: 30px
too negative clearance -10px, against 9.5.2 point 2 ? Clearance should be 0
2 P has margin-top: 10px, R has margin-top: 40px
too negative clearance -20px, against 9.5.2 point 2 ? Clearance should be -10px
3a R is empty, has margin-top: 10px
clearance 10px
3b R is empty, has margin-top: 20px
clearance needed but 0
3c R is empty, has margin-top: 30px
too negative clearance -10px, against 9.5.2, point 2 ? Clearance should be 0
4a F is preceded by a yellow box with margin-bottom: 20px, R has margin-top: 10px, no P
clearance 10px
4b F is preceded by a yellow box with margin-bottom: 20px, R has margin-top: 20px, no P
clearance needed but 0
4c F is preceded by a yellow box with margin-bottom: 20px, R has margin-top: 30px, no P
negative clearance -10px
4d F is preceded by a yellow box with margin-bottom: 20px, R has margin-top: 40px, no P
no clearance needed
5a F is preceded by a yellow box with margin-bottom: 20px, R is empty, has margin-top: 10px
10px clearance
5b F is preceded by a yellow box with margin-bottom: 20px, R is empty, has margin-top: 20px
clearance needed but 0
5c F is preceded by a yellow box with margin-bottom: 20px, R is empty, has margin-top: 30px
negative clearance -10px
5d F is preceded by a yellow box with margin-bottom: 20px, R is empty, has margin-top: 40px
no clearance needed, P does not expand
6a R is empty, has margin-top: 10px; margin-bottom: 40px, P has a top border
clearance 10px, bottom margin does not collapse with P bottom. In Safari bottom margin disappears
6b R is empty, has margin-top: 20px; margin-bottom: 40px, P has a top border
no clearance needed, P does not expand
6c R is empty, has margin-top: 30px; margin-bottom: 40px, P has a top border
no clearance needed, P does not expand
7a R is empty, has margin-top: 10px; margin-bottom: 40px
clearance 10px, margin-bottom not used in hypothetical position (which is NOT the same as clear:none position). In Safari bottom margin disappears
7b R is empty, has margin-top: 20px; margin-bottom: 40px
clearance needed but 0, margin-bottom not used in hypothetical position (which is NOT the same as clear:none position). In Safari bottom margin disappears
7c R is empty, has margin-top: 30px; margin-bottom: 40px
too negative clearance -10px, against 9.5.2 point 2 ? margin-bottom not used in hypothetical position (which is NOT the same as clear:none position). Clearance should be 0. In Safari bottom margin disappears
7d R is empty, has margin-top: 40px; margin-bottom: 40px
too negative clearance -20px, against 9.5.2 point 2 ? Clearance should be 0
8a R is empty, has margin-top: 10px, P has a top border
clearance 10px
8b R is empty, has margin-top: 20px, P has a top border
no clearance needed, P does not expand
8c R is empty, has margin-top: 30px, P has a top border
no clearance needed, P does not expand
9a R is empty, has margin-top: 10px, is preceded by an empty box with margin-bottom: 10px, P has a top border
clearance needed but 0
9b R is empty, has margin-top: 15px, is preceded by an empty box with margin-bottom: 15px, P has a top border
negative clearance -10px
9c R is empty, has margin-top: 20px, is preceded by an empty box with margin-bottom: 20px, P has a top border
no clearance needed, P does not expand
10a R is empty, is followed by a yellow box with margin-top: 30px, no P
clearance 20px, margin-top on subsequent sibling does not affect 'hypothetical position'
10b R is empty, has margin-top: 10px, is followed by a yellow box with margin-top: 30px, no P
clearance 10px, margin-top on subsequent sibling does not affect 'hypothetical position', but collapses with R margin-top
10c R is empty, has margin-top: 20px, is followed by a yellow box with margin-top: 30px, no P
no clearance needed, margin-top on subsequent sibling collapses with R margin-top
12a R is empty, has margin-top: 10px, is followed by an empty box with margin-top: 30px, P has a top border
clearance 10px, margin-top on subsequent sibling does not affect 'hypothetical position', collapses with R margin-top, but not with P bottom
12b R is empty, has margin-top: 20px, is followed by an empty box with margin-top: 30px, P has a top border
no clearance needed, margin-top on subsequent sibling collapses with R margin-top and with P bottom, P does not expand
12c R is empty, has margin-top: 30px, is followed by an empty box with margin-top: 30px, P has a top border
no clearance needed, margin-top on subsequent sibling collapses with R margin-top and with P bottom, P does not expand
13a R has a yellow first child with margin-top: 10px
clearance 10px
13b R has a yellow first child with margin-top: 20px
clearance needed but 0
13c R has a yellow first child with margin-top: 30px
too negative clearance -10px, against 9.5.2 point 2 ?
14a R has a yellow first child with margin-top: 10px, P has a top border
clearance 10px
14b R has a yellow first child with margin-top: 20px, P has a top border
no clearance needed
14c R has a yellow first child with margin-top: 30px, P has a top border
no clearance needed
15a R is collapsed through, has an empty first child with margin-top: 10px, P has a top border
clearance 10px
15b R is collapsed through, has an empty first child with margin-top: 20px, P has a top border
no clearance needed, P does not expand
15c R is collapsed through, has an empty first child with margin-top: 30px, P has a top border
no clearance needed, P does not expand
16a R is collapsed through, has an empty first child with margin-top: 10px
clearance 10px
16b R is collapsed through, has an empty first child with margin-top: 20px
clearance needed but 0
16c R is collapsed through, has an empty first child with margin-top: 30px
too negative clearance -10px, against 9.5.2 point 2 ? Clearance should be 0
17a R is empty, is followed by an empty box with margin-top: 30px
clearance 20px, margin-top on subsequent sibling does not affect 'hypothetical position', collapses with R margin-top but not with P bottom
17b R is empty, has margin-top: 10px, is followed by an empty box with margin-top: 30px
clearance 10px, margin-top on subsequent sibling does not affect 'hypothetical position', collapses with R margin-top but not with P bottom
17c R is empty, has margin-top: 20px, is followed by an empty box with margin-top: 30px
clearance needed but 0, margin-top on subsequent sibling does not affect 'hypothetical position', collapses with R margin-top but not with P bottom
17d R is empty, has margin-top: 30px, is followed by an empty box with margin-top: 30px
too negative clearance -10px, against 9.5.2 point 2 ? margin-top on subsequent sibling collapses with R margin-top but not with P bottom. Clearance should be 0
18a R is empty, is preceded by a yellow box with height: 10px
clearance 10px
18b R is empty, is preceded by a yellow box with height: 10px, margin-bottom: 10px
no clearance needed, P does not expand
18c R is empty, is preceded by a yellow box with height: 10px, margin-bottom: 20px
no clearance needed, P does not expand
19a R is empty, has margin-top: 10px is wrapped in parent with margin-top: 10px, no P
clearance needed but 0
19b R is empty, has margin-top: 10px is wrapped in parent with margin-top: 15px, no P
negative clearance -5px
19c R is empty, has margin-top: 10px is wrapped in parent with margin-top: 20px, no P
no clearance needed
20a R is empty, has margin-top: 40px is wrapped in parent with margin-top: 10px
too negative clearance -20px, against 9.5.2 point 2 ? Clearance should be -10px
20b R is empty, has margin-top: 40px is wrapped in parent with margin-top: 20px
negative clearance -20px
21a R is collapsed through, has margin-top: 10px, margin-bottom: 20px, is followed by a yellow box with margin-top: 40px, P has a top border
clearance 10px. Safari loses 10px of following sibling margin
21b R is collapsed through, has margin-top: 10px, margin-bottom 30px, is followed by a yellow box with margin-top: 30px, P has a top border
clearance 10px. Safari loses 20px of following sibling margin
21c R is collapsed through, has margin-top: 20px, margin-bottom: 30px, is followed by a yellow box with margin-top: 30px, P has a top border
no clearance needed
Disclaimer: All the comments in this page are based on my attempts to decrypt the definition and computation of clearance at 9.5.2, which IMHO is rather unclear. Current browsers behavior is much varied. The moral of the story is: If you have an element with the clear property set, especially if it is empty, avoid using any margins on it or collapsing with it. Work as if the rules said: Behavior of such margins is undefined.
CSS tests home