What does the CSS float property do?

float shoves an element to one side of its container and lets the following text and inline content wrap around it.

Float was originally designed for one thing: flowing text around an image, just like a magazine. When you float an element left, it hugs the left edge and the paragraph text flows down its right side (and vice versa for right).

.initial {
  float: left;
  font-size: 2.5em;
  padding-right: 2px;
}

Common use cases:

• Drop caps — a big first letter with the paragraph wrapping around it (the example above)
• Images with body text flowing around them
• Crude multi-column page layouts (the original hack before Flexbox/Grid existed)

Values: left, right, none (the default).

Tip: for years, floats were abused to build entire page layouts because nothing better existed — but they are fiddly (parents collapse, you need clearfix hacks). Today, reserve floats for actual text-wrapping and reach for Flexbox or Grid for layout.

Go deeper:

• MDN — float — the property reference with a live "Try it" demo of text wrapping around a floated box.