Clear

CSS Clear Summary

The clear property tells an element not to sit next to a floated element. It is mostly used when older layouts use float.

.next-section {
	clear: both;
}

Why Clear Exists

Floated elements are removed from the normal flow of the page. This means the next element may try to move up beside them.

Clear is used when you want the next element to move below the floated content instead of sitting beside it.

Clear Both

The most common value is clear: both;. It means the element should move below floated elements on the left and right.

.footer {
	clear: both;
}

Clear Left And Right

You can also clear only one side. clear: left; moves the element below left floats. clear: right; moves the element below right floats.

.below-left-float {
	clear: left;
}

When You Use Clear

Clear is not used as much in modern layouts because flexbox and grid are usually better choices. But it is still important to understand because many older websites use float.

If a section is appearing beside a floated image or box when it should appear below it, clear: both; is often the simple fix.