WeasySuite - 9.5 Floats

Chapter 9 - Visual formatting model - 9.5 Floats

Go to the relevant page of the specification.

adjacent-floats-001: Multiple floated boxes adjacent to each other
Floated boxes are allowed to be next to each other.
c414-flt-fit-000: Stacking Non-Replaced Left Floats
c414-flt-fit-001 (image): Stacking Replaced Left Floats
c414-flt-fit-002: Stacking Mixed Floats Part I
c414-flt-fit-003: Stacking Mixed Floats Part II
c414-flt-fit-004: Stacking Mixed Floats Part III
c414-flt-fit-005: Non-Replaced Float Not Fitting Beside Opposite Float
c414-flt-fit-006 (image): Replaced Float Not Fitting Beside Opposite Float
c414-flt-wrap-000: Text Not Fitting Beside Non-Replaced Float
If a shortened line box is too small to contain any further content, then it is shifted downward until either it fits or there are no more floats present.
c414-flt-wrap-001 (image): Text Not Fitting Beside Replaced Float
c5525-fltblck-000 (ahem, image): float
c5525-fltblck-001: float
c5525-fltcont-000 (image): float
c5525-fltinln-000 (ahem, image): float
c5525-fltmrgn-000 (ahem, image): float
c5525-fltmult-000 (image): float
c5525-fltwidth-000 (image): float
c5525-fltwidth-001 (image): float
c5525-fltwidth-002 (image): float
c5525-fltwidth-003 (image): float
c5525-fltwrap-000: float
c5526-fltclr-000 (ahem, image): clear
c5526-flthw-000 (image): clear
float-005 (ahem): float
A non-positioned block box created after a float box should flow vertically as if the float did not exist. The line boxes created next to the float should be shortened to make room for that preceding floated box.
float-006: floats - zero height empty float
A zero-height (margin-box) empty float without border and without padding will not require the line box to be shortened; in such case, the zero-height (margin-box) empty float will slide in or will fit in at the top of the line box.
floats-001: Floats, shifting left until it touches container edge
A left floated box shifts left until its outer edge touches the containing block edge.
floats-002: Floats, shifting right until it touches container edge
A right floated box shifts right until its outer edge touches the containing block edge.
floats-003: Floats, shifting left until touching other floats
A left floated box shifts left until it touches another float.
floats-004: Floats, shifting right until touching other floats
A right floated box shifts right until it touches another float.
floats-005 (image): Floats, shifting down below all other floated elements
Floated boxes shift down until it fits.
floats-006 (ahem): Left floats interacting with inline content
Inline boxes are reflowed to the first available line on the other side of a float.
floats-007: Floated elements shifting down below non-floated elements
Left floated boxes shift down until next to another float and there is room to fit.
floats-008: Floats and block box flow
Block boxes flow vertically as if floats don't exist.
floats-009 (ahem): Right floats interacting with right-to-left inline content
Inline boxes are reflowed to the first available line on the other side of a float for right-to-left.
floats-014: Left floated element margins do not collapse
Floating boxes never collapse with margins of adjacent floats or other boxes.
floats-015: Right floated elements margins do not collapse
Right floating boxes never collapse with margins of adjacent boxes or other floats.
floats-016: Floated elements stacked with blocks and inline elements
Floated elements are rendered in front of non-positioned in-flow blocks but behind in-flow inline boxes when a normal flow box is next to a floated element with negative margins.
floats-019: Float applied to absolutely positioned elements
Float cannot be applied to absolutely positioned element.
floats-020: Left floated elements and text wrapping
Block box is generated and floated to left and content flows on right side starting at the top.
floats-021: Right floated elements and text wrapping
Block box is generated and floated to right and content flows on left side starting at the top.
floats-022: Elements do not float when 'float' is set to 'none'
An element with 'float: none' behaves as if it were never set to begin with.
floats-023: Floated elements and container edges
Left floated boxes cannot go past the container's left edge.
floats-024: Left float with earlier floated siblings
Left floated box is to right of earlier floated box or below the earlier floated element's bottom edge.
floats-025: Right floating elements and container edge
Right floated boxes cannot go past the container's right edge.
floats-026: Margin affects left floated elements
Right outer edge of left-floating box cannot be to the right of the left outer edge of any right-floating box that is to the right of it.
floats-027: Margin affects right floated elements
Right outer edge of left-floating box cannot be to the right of the left outer edge of any right-floating box that is to the right of it.
floats-028: Floats and containment
Floating box's outer top cannot be higher than the top of its containing block.
floats-029: Content flowing around floated elements
Floats shift the current line and surrounding content to flow along its side unless clear is specified.
floats-030 (image): Position of floated elements in relation to previous elements
Outer top of a floating box cannot be higher than the outer top of any block or floated box generated by an element earlier in the source document.
floats-031 (image): Position of floated elements in relation to previous inline elements
Outer top of floating box cannot be higher than the top of any line-box containing a box generated by an element earlier in the source document.
floats-036: Floated left and aligned with current line box
A floated elements top edge will be aligned with the top of a line box.
floats-037: Floated right element aligns with current line box
A line box aligns with the top of a right floated box.
floats-038: Floats and table margins
The border box of a table cannot overlap any floats in the same block formatting context as the elements itself.
floats-039 (image): Floats and block level replaced element margins
The border box of a block level replaced element cannot overlap any floats in the same block formatting context as the element itself.
floats-040: Floats inline-block level element margins
The border box of a inline-block level element cannot overlap any floats in the same block formatting context as the element itself.
floats-041: Floats and stacking contexts with content
The contents of floats are stacked as if floats generated new stacking contexts.
floats-043: Right float with earlier floated siblings
A right floated box is to left of earlier floated boxes or below the earlier floated element's bottom edge.
floats-101: CSS Floats: Nested floats (no other content)
floats-102: CSS Floats: Nested floats (some inline content before nested float)
floats-103: CSS Floats: Nested floats (some inline content after nested float)
floats-104: CSS Floats: Unexpected Presences, Part 1
floats-105: CSS Floats: Unexpected Presences, Part 2
floats-106: CSS Floats: Unexpected Presences, Part 3
floats-108 (interact): CSS Floats: Float Sizing (styled floats)
floats-109 (interact): CSS Floats: Float Sizing (blocks inside styled floats)
floats-110: CSS Floats: Float Sizing
floats-111: CSS Floats: Shrink Wrapped Right Floats With Right Aligned Text
floats-112: CSS Floats: Shrink Wrapped Right Floats With Right Aligned Text
floats-113: CSS Floats: Shrink Wrapped Right Floats With Right Aligned Text
floats-114: CSS Floats: Generated Content
floats-115: CSS Floats: Auto Sizing
floats-116: CSS Floats: Auto Sizing (with padding)
floats-117: CSS Floats: Auto Sizing (with border)
floats-118: CSS Floats: Auto Sizing
floats-119: CSS Floats: Auto Sizing (with padding)
floats-120: CSS Floats: Auto Sizing (with border)
floats-121: CSS Floats: Fixed Sizing (with border)
floats-122: CSS Floats: Auto Sizing Float Followed By Text
floats-123: CSS Floats: Auto Sizing (with relative positioning)
floats-124: CSS Floats: Bottom Padding on Inline Children
floats-125: CSS Floats: Bottom Padding on Inline Children
floats-126 (interact): CSS Floats: Float Sizing (styled floated tables)
floats-127 (interact): CSS Floats: Float Sizing (styled floated tables)
floats-128 (interact): CSS Floats: Float Sizing (styled blocks within floated tables)
floats-129 (interact): CSS Floats: Float Sizing (styled floated tables within tables)
floats-130 (interact): CSS Floats: Float Sizing (blocks within styled floated tables within tables)
floats-131 (interact): CSS Floats: Float Sizing (styled blocks within floated tables within tables)
floats-132: CSS Floats: Wrapping long text
floats-133: CSS Floats: Wrapping text and position:static
floats-134: CSS Floats: Wrapping text and position:relative
floats-135: CSS Floats: Wrapping blocks around floats
floats-136: CSS Floats: Wrapping blocks around floats
floats-137 (ahem, animated): Wrapping text around multiple floats
floats-138: Clearing a float with margins
floats-139: Floats: Ultra basic test
floats-140: Floats: negative margin test
floats-141: Floats: No higher than earlier floats
floats-142: Floats: negative margin test
floats-143: Nested floats: Basic
floats-144: Floats inside blocks
floats-145: Bottom margins on floats
floats-146: Floats: No higher than earlier floats
floats-147: Floats: No more to the right than the right edge of the containing block
floats-149: Empty inlines being displaced by floats
floats-150: Positioning of floats in tables: auto-width floats with negative outer width
floats-151: Positioning of floats in tables: auto-width floats with negative outer width
floats-152: Positioning of floats in tables: zero-width floats with negative outer width
floats-153: Positioning of floats in tables: zero-width floats with negative outer width
floats-154: Stacking contexts of relatively positioned content inside floats
floats-bfc-001: Floats with overflow:hidden next to them
floats-bfc-002: Floats with overflow:hidden next to them
floats-rule3-outside-left-001: float placement around other float in BFC but outside containing block
Test for float placement around other float in BFC but outside containing block
floats-rule3-outside-left-002: float placement around other float in BFC but outside containing block
Test for float placement around other float in BFC but outside containing block
floats-rule3-outside-right-001: float placement around other float in BFC but outside containing block
Test for float placement around other float in BFC but outside containing block
floats-rule3-outside-right-002: float placement around other float in BFC but outside containing block
Test for float placement around other float in BFC but outside containing block
floats-rule7-outside-left-001: float placement around other float in BFC but outside containing block
Test for float placement around other float in BFC but outside containing block
floats-rule7-outside-right-001: float placement around other float in BFC but outside containing block
Test for float placement around other float in BFC but outside containing block
floats-wrap-bfc-001-left-overflow: Test for flow around floats
The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself.
floats-wrap-bfc-001-left-table: Test for flow around floats
The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself.
floats-wrap-bfc-001-right-overflow: Test for flow around floats
The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself.
floats-wrap-bfc-001-right-table: Test for flow around floats
The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself.
floats-wrap-bfc-002-left-overflow: Test for flow around floats
The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself.
floats-wrap-bfc-002-left-table: Test for flow around floats
The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself.
floats-wrap-bfc-002-right-overflow: Test for flow around floats
The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself.
floats-wrap-bfc-002-right-table: Test for flow around floats
The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself.
floats-wrap-bfc-003-left-overflow: Test for flow around floats
The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself.
floats-wrap-bfc-003-left-table: Test for flow around floats
The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself.
floats-wrap-bfc-003-right-overflow: Test for flow around floats
The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself.
floats-wrap-bfc-003-right-table: Test for flow around floats
The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself.
floats-wrap-bfc-004: Test for flow around floats
The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself.
floats-wrap-bfc-005: Test for flow around floats
The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself.
floats-wrap-bfc-006: Test for flow around floats
The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself.
floats-wrap-bfc-007: Test for flow around floats
The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself.
floats-wrap-bfc-outside-001: float
floats-wrap-top-below-bfc-001l: Test for wrapping around floats whose top is below the top of what must wrap around them
The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself.
floats-wrap-top-below-bfc-001r: Test for wrapping around floats whose top is below the top of what must wrap around them
The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself.
floats-wrap-top-below-bfc-002l: Test for wrapping around floats whose top is below the top of what must wrap around them
The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself.
floats-wrap-top-below-bfc-002r: Test for wrapping around floats whose top is below the top of what must wrap around them
The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself.
floats-wrap-top-below-bfc-003l: Test for wrapping around floats whose top is below the top of what must wrap around them
The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself.
floats-wrap-top-below-bfc-003r: Test for wrapping around floats whose top is below the top of what must wrap around them
The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself.
floats-wrap-top-below-inline-001l: Test for wrapping around floats whose top is below the top of what must wrap around them
However, line boxes created next to the float are shortened to make room for the margin box of the float.
floats-wrap-top-below-inline-001r: Test for wrapping around floats whose top is below the top of what must wrap around them
However, line boxes created next to the float are shortened to make room for the margin box of the float.
floats-wrap-top-below-inline-002l: Test for wrapping around floats whose top is below the top of what must wrap around them
However, line boxes created next to the float are shortened to make room for the margin box of the float.
floats-wrap-top-below-inline-002r: Test for wrapping around floats whose top is below the top of what must wrap around them
However, line boxes created next to the float are shortened to make room for the margin box of the float.
floats-wrap-top-below-inline-003l: Test for wrapping around floats whose top is below the top of what must wrap around them
However, line boxes created next to the float are shortened to make room for the margin box of the float.
floats-wrap-top-below-inline-003r: Test for wrapping around floats whose top is below the top of what must wrap around them
However, line boxes created next to the float are shortened to make room for the margin box of the float.
floats-zero-height-wrap-001: wrapping around zero-height floats
wrapping around zero-height floats
floats-zero-height-wrap-002: wrapping around zero-height floats
wrapping around zero-height floats
list-style-position-008: Marker box position (outside principal box) - floated-left child
A floated element (as a child of the principal box) should not affect the horizontal position of the marker box (positioned outside principal box) in relation to the principal box's content
list-style-position-009: Marker box position (outside principal box) - floated-right child
A floated element (as a child of the principal box) should not affect the horizontal position of the marker box (positioned outside principal box) in relation to the principal box's content
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
max-height-106 (ahem): max-height - float and overflow
max-width-106 (ahem): max-width - float and overflow
'max-width' specifies a fixed maximum used width. If the used width is greater than max-width, then the computed value of max-width is used as the computed value for width. A floated box should not become wider than its declared max-width.
stack-floats-001: Stacking order: Floats and Blocks in Inlines
stack-floats-002: Stacking order: Floats and Blocks in Inlines
stack-floats-003: Stacking order: Floats and Blocks in Inlines
stack-floats-004: Stacking order: Floats and Blocks in Inlines