Oppheving av flyt med clear-egenskapen i CSS

For å løse et slikt problem finnes det en spesiell egenskap clear som opphever flyt. Verdien left opphever flyt til venstre, verdien right - til høyre, og verdien both - på begge sider. Denne verdien brukes mest ofte.

Så, egenskapen clear opphever flyt. I vårt tilfelle vil dette tillate oss å gjøre slik at det flytende bildet fra den første div-en ikke overlapper den andre div-en.

Samtidig bør clear gis til det elementet som flytende elementer ikke skal overlappe, det vil si i vårt tilfelle bør det gis til den andre div-en.

La oss gjøre dette - gi den andre div-en foruten klassen parent også klassen clearfix og for denne nye klassen sette egenskapen clear med verdien both - overlappingen av bildet vil forsvinne:

<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 allment akseptert, så bruk det i fremtiden.