CSS Floating and Clearing

Before Flexbox and Grid, floating was one of the few ways to create layouts in CSS. Developers used floats for sidebars, image alignment, and even entire page structures. Today, floats are mostly used for wrapping text around images or small layout tweaks, while Flexbox and Grid handle complex layouts.

Float Property

The float property moves an element to one side of its container, allowing other content to flow around it.

• Values:
  • left → floats element to the left.
  • right → floats element to the right.
  • none → default; no floating.

Example:

Code Block Loading...

The image floats left, and text wraps around it.

Floating Text or Other Elements

Floats aren’t limited to images. You can float any element, like a <span>:

Code Block Loading...

The span floats right, and text flows around it.

Clearing Floats

When multiple elements are floated, they stack horizontally until no space remains. To force elements onto a new line, use the clear property.

• Values:
  • left → clears left floats.
  • right → clears right floats.
  • both → clears both sides.
  • none → default; no clearing.

Example:

Code Block Loading...

The second image moves below the first instead of stacking horizontally.

Interactive Playground

Key Takeaways

• Floats move elements left or right, letting text wrap around.
• Clearing prevents floated elements from stacking horizontally.
• Floats are less common for layouts today, but still useful for text/image alignment.
• Flexbox and Grid are modern alternatives for complex layouts.