float

float places a box toward one side of its containing block so nearby line boxes can wrap around it. Floats remain part of the surrounding formatting context even though they are taken out of ordinary block flow.

Wrap text around a box

The blue floated box occupies the left side. The paragraph’s lines wrap beside it until they pass its bottom margin edge.

<div class="article">
  <div class="illustration" aria-hidden="true"></div>
  <p>
    This decorative square sits alongside the beginning of the paragraph.
    Continue adding text to see the lines wrap next to it and then use the full
    width once they pass its lower edge. The text stays in normal reading order.
  </p>
</div>

.article {
  display: flow-root;
  max-width: 28rem;
}
.illustration {
  float: left;
  width: 6rem;
  height: 5rem;
  margin: 0 1rem 0.5rem 0;
  background: #bfdbfe;
}
p {
  line-height: 1.5;
}

Contain a float without clipping

Flow-root establishes a block formatting context. The parent’s border extends around its floated child even when the accompanying text is short.

<div class="note">
  <div class="marker" aria-hidden="true"></div>
  <p>A short note.</p>
</div>

.note {
  display: flow-root;
  border: 1px solid #94a3b8;
  padding: 0.75rem;
}
.marker {
  float: inline-end;
  width: 4rem;
  height: 5rem;
  margin-inline-start: 1rem;
  background: #dbeafe;
}

Values and defaults

The initial value is none and float is not inherited. Left and right use physical sides; inline-start and inline-end follow writing direction. Floats need a useful size, and their margins reserve separation from wrapping text.

Float does not control flex or grid item placement. Absolutely positioned boxes do not use ordinary float behavior either. For aligned rows and columns, choose Flexbox or Grid; floats remain useful for text wrapping.

Why the parent appears too short

An ordinary parent’s height can exclude its floated children. Flow-root contains them without the clipping and scroll-container side effects of overflow:hidden. Clear instead moves a subsequent box below relevant earlier floats.

Keep floated material in a logical source order and test narrow widths. A large fixed float can leave too little room for text. Learn display and margin.

Sources and browser support

MDN: float describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.