CSCosmos

CSS Universe

Visual Learning

Back to CSS Universe

intermediate

Floats & Clearfix

Legacy layout tool with modern containment and clearfix recipes.

floatslegacy layout
Explore visualizers

Learning checklist

  • Float stacking rules
  • clearfix techniques
  • BFC and containment

Definition

Legacy layout tool with modern containment and clearfix recipes.

Syntax

Float stacking rules

Example

Use the visualizer below to apply these properties and see the result live.

Deep dive

Why this matters

Principles, mental models, and debugging clues tailored to the topic.

Visual intuition

Each property is paired with motion or color feedback so you build muscle memory, not just recall syntax.

Copy-ready CSS

Controls emit exact CSS you can copy. Use it as a starter token or paste into DevTools for instant validation.

Performance notes

Learn where reflow, repaint, or compositing occurs so you avoid jank and choose GPU-friendly paths.

Accessibility first

Focus-visible, reduced-motion, and contrast tips are woven into every lab to keep experiences inclusive.

Practice

Try recreating a UI card using this topic. Toggle between dark and light modes to validate token contrast and responsiveness.

Tip: use DevTools overlays (grid/flex) plus the copy CSS button.

Interactive Lab

Floats & Clearfix

Toggle float direction and clearfix to see how surrounding text wraps.

Float: left ยท Clearfix: on

Try these

  • Float left vs right and watch text wrap.
  • Disable clearfix to see parent collapse.
  • Set float to none to restore normal flow.
Floated card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porttitor, quam a vulputate volutpat, elit ante condimentum magna, nec ultrices ligula nisi nec leo. Vivamus placerat magna vitae dui.

Donec euismod, nisl eget consectetur tempor, nisl nunc aliquet nibh, id ultrices nisl nunc eget lorem.

CSS
.float-box { float: left; width: 160px; }
.clearfix { overflow: auto; }
HTML
<div class="clearfix">
  <div class="float-box">Floated card</div>
  <p>Lorem ipsum dolor sit amet...</p>
</div>