Float layout: float and clear properties #85

Phase 9: Advanced Layout#

Implement CSS float and clear properties for flowing content around floated elements.

Current State#

• float and clear properties are NOT parsed in computed styles
• Layout only supports normal block and inline flow
• No float tracking or line-shortening logic exists

Requirements#

1. Parse float: none (default), left, right
2. Parse clear: none (default), left, right, both
3. Float layout:
   • Floated elements are removed from normal flow
   • float: left elements are placed at the left edge of the containing block
   • float: right elements are placed at the right edge
   • Subsequent floats stack horizontally (or drop below if insufficient space)
   • Floats do not extend outside their containing block
4. Line box shortening: Inline content flows around floats — line boxes are shortened to avoid overlapping floated elements
5. Clear: An element with clear: left moves below all preceding left floats. clear: right below right floats. clear: both below all floats.
6. Containing floats: A block formatting context (overflow != visible, floats, etc.) must expand to contain its floated children ("clearfix" behavior)
7. Float stacking: Multiple floats of the same direction stack horizontally, wrapping to the next line when they exceed container width

Files to Modify#

• crates/style/src/computed.rs — Add Float and Clear enums, parse from CSS values, add to ComputedStyle
• crates/layout/src/lib.rs — Major changes: track float positions, implement line-shortening for inline layout, handle clear, expand BFC to contain floats

Tests#

• float: left element is positioned at left edge, content wraps around it
• float: right element is positioned at right edge
• Two left floats stack horizontally
• clear: both moves element below all floats
• Containing block expands to enclose floated children (BFC containment)
• Inline text wraps around a floated element

Acceptance Criteria#

• float: left and float: right position elements correctly
• Inline content flows around floats
• clear property works correctly
• BFC containers expand to contain floats
• All tests pass, clippy clean, fmt clean