Ophævning af omflydning med clear egenskaben i CSS

For at løse dette problem findes der en speciel egenskab clear, som ophæver omflydning. Værdien left ophæver omflydning til venstre, værdien right - til højre, og værdien both - fra begge sider. Denne værdi er den mest brugte.

Så, egenskaben clear ophæver omflydning. I vores tilfælde vil dette tillade os at gøre sådan, at det flydende billede fra den første div ikke overlapper den anden div.

Samtidig skal clear gives til det element, som flydende elementer ikke må overlappe, det vil sige i vores tilfælde bør det gives til den anden div.

Lad os gøre dette - give den anden div foruden klassen parent også klassen clearfix og for denne nye klasse sætte egenskaben clear til værdien both - overlappingen af billedet forsvinder:

<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;
}

Navnet clearfix er almindeligt accepteret, så brug derfor dette i fremtiden.