WeasySuite - 9.5.2 Controlling flow next to floats: the 'clear' property

Chapter 9 - Visual formatting model - 9.5.2 Controlling flow next to floats: the 'clear' property

Go to the relevant page of the specification.

c5526-fltclr-000 (ahem, image): clear
clear-001: Clear set to 'left'
The 'clear' property set to a value of 'left' positions the current element to clear left-floated elements.
clear-002: Clear set to 'right'
The 'clear' property set to a value of 'right' positions the current element to clear right-floated elements.
clear-003: Clear set to 'both'
The 'clear' property set to a value of 'both' positions the current element to clear both left- and right-floated elements.
clear-004: Clear set to 'none'
The 'clear' property set to a value of 'none' does not perform any clearing of floated elements.
clear-005: Clear set to 'inherit'
The 'clear' property set to 'inherit', inherits the computed value from the parent element.
clear-applies-to-000: Clear on floats after floats with display:none blocks between them
clear-applies-to-001: Clear applied to element with 'display' set to 'table-row-group'
The 'clear' property does not apply to elements with a display of 'table-row-group'.
clear-applies-to-002: Clear applied to element with 'display' set to 'table-header-group'
The 'clear' property does not apply to elements with a display of 'table-header-group'.
clear-applies-to-003: Clear applied to element with 'display' set to 'table-footer-group'
The 'clear' property does not apply to elements with a display of 'table-footer-group'.
clear-applies-to-004: Clear applied to element with 'display' set to 'table-row'
The 'clear' property does not apply to elements with a display of 'table-row'.
clear-applies-to-005: Clear applied to element with 'display' set to 'table-column-group'
The 'clear' property does not apply to elements with a display of 'table-column-group'.
clear-applies-to-006: Clear applied to element with 'display' set to 'table-column'
The 'clear' property does not apply to elements with a display of 'table-column'.
clear-applies-to-007: Clear applied to element with 'display' set to 'table-cell'
The 'clear' property does not apply to elements with a display of 'table-cell'.
clear-applies-to-008: Clear on inline elements
The 'clear' property does not apply to elements with a display of 'inline'.
clear-applies-to-009: Clear applied to element with 'display' set to block
The 'clear' property applies to elements with a display of block.
clear-applies-to-010: Clear applied to element with 'display' set to list-item
The 'clear' property applies to elements with a display of list-item.
clear-applies-to-012: Clear applied to element with 'display' set to inline-block
The 'clear' property does not apply to elements with a display of 'inline-block'.
clear-applies-to-013: Clear applied to element with 'display' set to 'table'
The 'clear' property does apply to elements with a display of 'table'.
clear-applies-to-014: Clear applied to element with 'display' set to 'inline-table'
The 'clear' property does not apply to elements with a display of 'inline-table'.
clear-applies-to-015: Clear applied to element with 'display' set to 'table-caption'
The 'clear' property does not apply to elements with a display of 'table-caption'.
clear-clearance-calculation-001 (ahem, image): Clearance calculations - clear box non-collapsing margins with larger margings than clearance
When a cleared element has more top margin than the height of the floated element the margin is collpased with previous in-flow children. The element is then placed at the point of the resulting collapsed margin.
clear-clearance-calculation-002 (ahem, image): Clearance calculations - clear box non-collapsing margins with larger clearance than margins
If after margin collapsing the position of the cleared element is above or hypothetically positioned within the layout position of the float. Then the cleared element is positioned directly below the floated element.
clear-clearance-calculation-003: Clearance calculations - clear box collapsing margins
When a cleared element has more top margin than the height of the floated element the margin is collpased with previous in-flow children. The element is then placed at the point of the resulting collapsed margin.
clear-clearance-calculation-004: clear and clearance calculation - margin collapsing
With clear: left, the top border edge of the last paragraph must be below the floating paragraph, i.e., 50px lower. That means that the margin-bottom of the first paragraph must not collapse with the margin-top of the last paragraph and clearance must be added such that clearance + margin-top of last paragraph = 50px, i.e., clearance = 50px - margin-top of last paragraph = 50px - 75px = - 25px.
clear-clearance-calculation-005: clear and clearance calculation - margin collapsing
With clear: none, the first and last paragraphs' margins collapse and the last paragraph's top border edge should be flush with the top of the floating paragraph.
clear-default-inheritance-001: Clear default inheritance
The 'clear' property is not inherited by default from the parent element.
clear-float-001: Child elements are not impacted by 'clear'
Child elements of the container are not impacted by clear.
clear-float-002: Clearance of floats and top margin affect
Clearance is introduced as spacing above the top margin.
clear-float-003: Clear floats handled after margin collapsing
Clearance is introduced as spacing above the top margin after margin collapsing occurs.
clear-float-004: Clear set to 'left' with earlier left floated boxes
Boxes with 'clear: left' need to clear earlier left floated boxes.
clear-float-005: Clear set to 'right' with earlier right floated boxes
Boxes with 'clear: right' need to clear earlier right floated boxes.
clear-float-006: Clear set to 'both' with earlier floated boxes
Boxes with 'clear: both' need to clear earlier floated boxes.
clear-float-007: Clear set to 'left' with later left floated boxes
Boxes with 'clear: left' do not clear later left floated boxes.
clear-float-008: Clear set to 'right' with later right floated boxes
Boxes with 'clear: right' do not clear later right floated boxes.
clear-float-009: Clear set to 'both' with later floated boxes
Boxes with 'clear: both' do not clear later floated boxes.
clear-initial-001: Clear initial value
The 'clear' property has a initial value of 'none'.
clear-inline-001: Clear on inline elements
Clear cannot be applied to an inline box.
clearance-006: Zero Clearance
Zero clearance is not the same as no clearance.
margin-collapse-033: margin collapsing - clear
Margin-top of following siblings of a block on which 'clear' has been set (to a different value than 'none') must not be substracted when calculating clearance. When an element's own margins collapse, and that element has had clearance applied to it, its top margin collapses with the adjoining margins of following siblings.
margin-collapse-034: margin collapsing - clear
Margin-top of following siblings of a block on which 'clear' has been set (to a different value than 'none') must not be substracted when calculating clearance. When an element's own margins collapse, and that element has had clearance applied to it, its top margin collapses with the adjoining margins of following siblings.
margin-collapse-035: margin collapsing - clear
Margin-top of following siblings of a block on which 'clear' has been set (to a different value than 'none') must not be substracted when calculating clearance. When an element's own margins collapse, and that element has had clearance applied to it, its top margin collapses with the adjoining margins of following siblings.
margin-collapse-clear-000: Margin Collapsing with Clearance
margin-collapse-clear-001: Margin Collapsing with Clearance
margin-collapse-clear-002: Margin Collapsing with Clearance
margin-collapse-clear-003: Margin Collapsing with Clearance
margin-collapse-clear-004: Margin Collapsing with Clearance
margin-collapse-clear-005 (may): Margin Collapsing with Clearance
margin-collapse-clear-006: Margin Collapsing with Clearance
margin-collapse-clear-007: Margin Collapsing with Clearance
margin-collapse-clear-008: Margin Collapsing with Clearance
margin-collapse-clear-009: Margin Collapsing with Clearance
margin-collapse-clear-010: Margin Collapsing with Clearance
margin-collapse-clear-011 (may): Margin Collapsing with Clearance