CSS Clear Summary

The clear property stops an element from moving up beside a floated element.

.next-section {
	clear: both;
}

Clear is most useful when a floated image or box causes the next block of content to wrap beside it.

Clear Works With Float

A floated element moves to one side and lets nearby content wrap around it. A cleared element moves below the float instead.

.photo {
	float: left;
	margin-right: 16px;
}

.next-section {
	clear: left;
}

clear: left clears left floats. clear: right clears right floats. clear: both clears both sides.

Clear exists because float affects nearby content. For most page layout work, use Flexbox or Grid instead of float and clear.

The Float lesson explains the behavior that clear is designed to control.