Chapter 9 - Visual formatting model - 9.5.1 Positioning the float: the 'float' property
Go to the relevant page of the specification.
- c414-flt-000
-
Non-Replaced Float Alignment to Containing Block Edges
A floated box is shifted to the left or right until its outer edge touches the containing block edge. - c414-flt-001
-
Non-Replaced Floating Left vs. Right
- c414-flt-002 (image)
-
Replaced Float Alignment to Containing Block Edges
- c414-flt-003 (image)
-
Replaced Floating Left vs. Right
- c414-flt-ln-000
-
Vertical Position of Floats
- c414-flt-ln-001 (image)
-
Vertical Position of Floats
- c414-flt-ln-002 (interact)
-
Vertical Position of Floats
- c414-flt-ln-003
-
Vertical Position of Floats
- c5525-flt-l-000 (image)
-
Floating Elements
- c5525-flt-r-000 (image)
-
float
- c5525-fltcont-000 (image)
-
float
- c5525-fltmult-000 (image)
-
float
- float-001
-
Float set to 'left'
The 'float' property set to 'left' correctly aligns the element to the left and text/objects flow around it. - float-002
-
Float set to 'right'
The 'float' property set to 'right' correctly aligns the element to the right and text/objects flow around it. - float-003
-
Float set to 'none'
The 'float' property set to 'none' does not float the element. - float-004
-
Float set to 'inherit'
The 'float' property set to 'inherit' correctly inherits the value from the parent element. - float-applies-to-001
-
Float applied to element with 'display' set to 'table-row-group'
The 'float' property applies to elements with a display of 'table-row-group'. - float-applies-to-002
-
Float applied to element with 'display' set to 'table-header-group'
The 'float' property applies to elements with a display of 'table-header-group'. - float-applies-to-003
-
Float applied to element with 'display' set to 'table-footer-group'
The 'float' property applies to elements with a display of 'table-footer-group'. - float-applies-to-004
-
Float applied to element with 'display' set to 'table-row'
The 'float' property applies to elements with a display of 'table-row'. - float-applies-to-005
-
Float applied to element with 'display' set to 'table-column-group'
The 'float' property applies to elements with a display of 'table-column-group'. - float-applies-to-006
-
Float applied to element with 'display' set to 'table-column'
The 'float' property applies to elements with a display of 'table-column'. - float-applies-to-007
-
Float applied to element with 'display' set to 'table-cell'
The 'float' property applies to elements with a display of 'table-cell'. - float-applies-to-008
-
Float applied to element with 'display' set to inline
The 'float' property applies to elements with a display of inline. - float-applies-to-009
-
Float applied to element with 'display' set to block
The 'float' property applies to elements with a display of block. - float-applies-to-010
-
Float applied to element with 'display' set to list-item
The 'float' property applies to elements with a display of list-item. - float-applies-to-012
-
Float applied to element with 'display' set to inline-block
The 'float' property applies to elements with a display of inline-block. - float-applies-to-013
-
Float applied to element with 'display' set to 'table'
The 'float' property applies to elements with a display of 'table'. - float-applies-to-014
-
Float applied to element with 'display' set to 'inline-table'
The 'float' property applies to elements with a display of 'inline-table'. - float-applies-to-015
-
Float applied to element with 'display' set to 'table-caption'
The 'float' property applies to elements with a display of 'table-caption'. - floats-placement-vertical-001a
-
Test for float placement rules
A floating box must be placed as high as possible. - floats-placement-vertical-001b
-
Test for float placement rules
A floating box must be placed as high as possible. - floats-placement-vertical-001c
-
Test for float placement rules
A floating box must be placed as high as possible. - floats-placement-vertical-003
-
Test for float placement rules
The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document. A floating box must be placed as high as possible. - floats-placement-vertical-004
-
Test for float placement rules
A floating box must be placed as high as possible. - inlines-013 (image)
-
Inline box model: space taken by images before floats
- list-style-position-006
-
Marker box position (inside principal box) - block box with 'float:left' (as child of principal box)
Since a marker box is the first inline element in the principal box when 'list-style-position:inside', the following block box (floated to the left) must visually appear before the marker box in the rendered document - list-style-position-007
-
Marker box position (inside principal box) - block box with 'float:right' (as child of principal box)
- list-style-position-014
-
Marker box position (outside principal box) - floated :before pseudo-element list-item ('list-style-position:inside')
When the :before element is set as a list-item, it establishes a principal box into which a marker box is placed (when 'list-style-position:inside). Since this :before pseudo element is floated left, the document tree content of the associated element must appear alongside (after) this :before pseudo element. The position of the marker box of the associated element must not be affected, as it must still appear to the outside left edge of it's principal box (since 'list-style-position:outside'). - list-style-position-015
-
Marker box position (inside principal box) - floated :before pseudo-element list-item ('list-style-position:outside')
When the :before element is set as a list-item, it establishes a principal box and a marker box which is positioned outside of that principal box (since 'list-style-position:outside). Since this :before pseudo element is floated left, the principal box (and marker box, since 'list-style-position:inside') of the associated element must appear alongside (after) this :before pseudo element. The position of the marker box of the :before pseudo element must still appear to the outside left edge of it's associated element's principal box (since 'list-style-position:outside'). - list-style-position-016
-
Marker box position (inside principal box) - floated :before pseudo-element list-item ('list-style-position:inside')
When the :before element is set as a list-item, it establishes a principal box into which a marker box is placed (when 'list-style-position:inside). Since the :before pseudo element is floated left, the principal box (and marker box, since 'list-style-position:inside') of the associated element must appear alongside (after) the :before pseudo element. - list-style-position-017
-
Marker box position (outside principal box) - floated :before pseudo-element list-item ('list-style-position:outside')
When the :before element is set as a list-item, it establishes a principal box into which a marker box is placed (when 'list-style-position:inside). Since the :before pseudo element is floated left, The document tree content of the associated element must appear alongside (after) the :before pseudo element. Since the marker box of the :before pseudo element should be positioned at the same coordinate as the associated element's marker box, either bullet could appear in front of the other (since stacking levels of marker boxes aren't defined in CSS2.1, in this context).