CSS clear Property

CSS clear Property

The clear property in CSS prevents elements from floating next to floated elements. It forces an element to move below floated elements instead of wrapping around them.

1. Syntax

selector {
  clear: none | left | right | both | inline-start | inline-end;
}

Value	Description
none (default)	No clearing; allows floating elements beside it.
left	Moves below any floated elements on the left.
right	Moves below any floated elements on the right.
both	Moves below all floated elements (left & right).
inline-start	Moves below floated elements at the inline start (depends on writing direction).
inline-end	Moves below floated elements at the inline end.

2. Example – Clearing a Float

img {
  float: left;
  margin-right: 20px;
}

p {
  clear: left;
}

✅ The paragraph moves below the floated image.

3. Example – Clearing Both Sides

.box {
  float: left;
  width: 50%;
  background: lightblue;
}

.clearfix {
  clear: both;
}

<div class="box">Left Float</div>
<div class="box">Right Float</div>
<div class="clearfix"></div>

✅ The .clearfix ensures the next content appears below both floated elements.

4. Alternative – Using the clearfix Hack

A better way to clear floats is using the clearfix technique:

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

✅ Auto-clears all floats inside the element.

5. Best Practices

✔ Use clear: both; when you don't want elements beside floats.
✔ Use .clearfix to auto-clear floating elements inside a container.
✔ Prefer CSS Flexbox or Grid instead of float-based layouts.