CSS clearance computation
Note: The definition and computation of clearance at 9.5.2, which was rather unclear and inconsistent, has been rewritten in the CSS 2.1 Working Draft dated 07 December 2010. The following is an attempt to review various cases according to the current formulation, which is of much clearer interpretation.
In the two three columns below ('hypothetical', '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, all including an element with clear. The first column is like the second one, but with that element not having the 'clear' property and having a bottom border: this should put that element in its 'hypothetical position'. The third column 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 what should happen and the behavior of Fx 3.6, IE 9 (preview 8023), and Saf 5. Opera 11 is not mentioned at the moment, since its behavior is different (presumably wrong) in too many cases. Fx 3.6 and IE 9 seem to have identical behaviour and follow the spec, except for point 2 in 9.5.2 ("The amount necessary to place the top border edge of the block at its hypothetical position"), which is ignored, allowing an element with clear to go "higher" than its hypothetical position).
hypothetical
clear
reference
description
comments
1a R has margin-top: 10px
clearance 10px
1b R has margin-top: 20px
clearance needed but 0
1c R has margin-top: 30px
clearance needed but 0. In Fx, IE9 and Saf too negative clearance -10px, against 9.5.2 point 2
2 P has margin-top: 10px, R has margin-top: 40px
clearance -10px. In Fx, IE9 and Saf too negative clearance -20px, against 9.5.2 point 2
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
clearance needed but 0. In Fx, IE9 and Saf too negative clearance -10px, against 9.5.2, point 2
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 Saf wrong height of the parent
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. In Saf wrong height of the parent
7b R is empty, has margin-top: 20px; margin-bottom: 40px
clearance needed but 0. In Saf wrong height of the parent
7c R is empty, has margin-top: 30px; margin-bottom: 40px
clearance needed but 0. In Fx e Saf too negative clearance -10px, against 9.5.2 point 2. In Saf wrong height of the parent
7d R is empty, has margin-top: 40px; margin-bottom: 40px
clearance needed but 0. In Fx e Saf too negative clearance -20px, against 9.5.2 point 2. In Saf wrong height of the parent
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
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 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 collapses with R margin-top, but not with P bottom. In Saf wrong height of the parent
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
clearence needed but 0. In Fx, IE9 and Saf 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
clearance needed but 0. In Fx, IE9 and Saf too negative clearance -10px, against 9.5.2 point 2
17a R is empty, is followed by an empty box with margin-top: 30px
clearance 20px, margin-top on subsequent sibling collapses with R margin-top but not with P bottom. In Saf wrong height of the parent
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 collapses with R margin-top but not with P bottom. In Saf wrong height of the parent
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 collapses with R margin-top but not with P bottom. In Saf wrong height of the parent
17d R is empty, has margin-top: 30px, is followed by an empty box with margin-top: 30px
clearance needed but 0, margin-top on subsequent sibling collapses with R margin-top but not with P bottom. In Fx e Saf too negative clearance -10px, against 9.5.2 point 2. In Saf wrong height of the parent
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
clearance -10px. In Fx, IE9 and Saf too negative clearance -20px, against 9.5.2 point 2
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. In Saf wrong height of the parent
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. In Saf wrong height of the parent
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
CSS tests home