Web Analytics
☕ Coffee 𝕏 Follow
0%

Float & Clear

Beginner ~8 min read

What is Float?

The float property removes an element from normal flow and pushes it to the left or right, allowing text to wrap around it. Originally designed for magazine-style layouts.

Float Left

float: left pushes the element to the left side, with content wrapping around the right.

HTML
CSS
JS

Float Right

float: right pushes the element to the right side, with content wrapping around the left.

HTML
CSS
JS

Multiple Floats

Multiple floated elements stack horizontally until they run out of space, then wrap to the next line.

HTML
CSS
JS

The Clear Property

clear prevents an element from wrapping around floated elements. Values: left, right, both, none.

HTML
CSS
JS

Clearfix Technique

When all children are floated, the parent collapses to zero height. The clearfix hack solves this problem.

HTML
CSS
JS
Modern Alternative: Float is mostly replaced by Flexbox and Grid for layouts. Use float primarily for text wrapping around images.

Summary

  • float: left - Push element left, content wraps right
  • float: right - Push element right, content wraps left
  • clear: both - Prevent wrapping around floats
  • Clearfix prevents parent collapse when all children float
  • Best for: Images with text wrapping
  • For layouts: Use Flexbox or Grid instead

Quick Quiz

Which property prevents an element from wrapping around floated elements?

A
float: none
B
clear: both
C
display: block
D
position: static
Previous Position
Next Flexbox Basics