Opheffen van floaten met de clear eigenschap in CSS

Om dit probleem op te lossen bestaat er een speciale eigenschap clear, die het floaten opheft. De waarde left heft floaten links op, de waarde right - rechts, en de waarde both - aan beide kanten. Deze waarde wordt het meest gebruikt.

Kortom, de eigenschap clear heft floaten op. In ons geval stelt dit ons in staat om te voorkomen dat de zwevende afbeelding uit de eerste div over de tweede div heen schuift.

clear moet worden toegepast op het element waarover geen zwevende elementen mogen schuiven, dus in ons geval moet het worden toegepast op de tweede div.

Laten we dit doen - geven we de tweede div naast de klasse parent ook de klasse clearfix en voor deze nieuwe klasse stellen we de eigenschap clear in op de waarde both - het overlappen van de afbeelding verdwijnt:

<div class="parent">
	<img src="img.png" alt="">
	text
</div>
<div class="parent clearfix">
	text
</div>

.parent {
	border: 1px solid red;
}
.parent img {
	float: left;
}

.clearfix {
	clear: both;
}

De naam clearfix is algemeen aanvaard, gebruik deze daarom in de toekomst.