clear

clear decides whether a box can sit alongside earlier floats in the same block formatting context. It can move that box below the relevant float edges; it does not remove the floats or change their source order.

Start the next paragraph below the float

The first paragraph wraps beside the blue box. The second uses clear:left, so its border starts below that left float’s bottom margin edge.

<div class="article">
  <div class="float" aria-hidden="true"></div>
  <p>Short text beside the float.</p>
  <p class="next">This paragraph clears the left float.</p>
</div>

.article {
  display: flow-root;
}
.float {
  float: left;
  width: 6rem;
  height: 6rem;
  margin: 0 1rem 0.5rem 0;
  background: #bfdbfe;
}
.next {
  clear: left;
  border-top: 2px solid #2563eb;
  padding-top: 0.5rem;
}

Clear both sides before the next topic

Two decorative boxes float on opposite sides. Clear:both moves the new heading beneath whichever relevant float extends farther down.

<div class="article">
  <div class="left" aria-hidden="true"></div>
  <div class="right" aria-hidden="true"></div>
  <p>Text between two floats.</p>
  <h2>Next topic</h2>
  <p>The heading begins below both floats.</p>
</div>

.article {
  display: flow-root;
}
.left {
  float: left;
  width: 4rem;
  height: 4rem;
  background: #bfdbfe;
}
.right {
  float: right;
  width: 4rem;
  height: 6rem;
  background: #ddd6fe;
}
h2 {
  clear: both;
  padding-top: 0.75rem;
}

Values and defaults

The initial value is none and clear is not inherited. Left clears earlier left floats; right clears right floats; both clears either side. Inline-start and inline-end select a side using writing direction. None requests no clearance.

Clear applies to block-level boxes and can affect a later float too. It only considers relevant earlier floats in the same block formatting context. It does not clear an absolute box, a flex item, or a float isolated inside another formatting context.

Choose clearing or containment

Clear on following content pushes that content below floats. Display:flow-root on the parent makes the parent contain its floated children. These solve related but different problems; choose based on which box needs to change.

Do not add empty clearing elements when a meaningful following element or flow-root can express the layout. Learn float, display, and margin.

Sources and browser support

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