Opheffing van Vloei met die clear Eienskap in CSS

Vir die oplossing van so 'n probleem is daar 'n spesiale eienskap clear wat vloei ophef. Die waarde left hef vloei aan die linkerkant op, die waarde right - aan die regterkant, en die waarde both - aan beide kante. Hierdie waarde word die meeste gebruik.

Dus, die eienskap clear hef vloei op. In ons geval sal dit ons toelaat om te maak sodat die vloeiende prentjie uit die eerste div nie oor die tweede div gly nie.

Terselfdertyd moet clear gegee word aan daardie element waarop vloeiende elemente nie moet gly nie, dit wil sê in ons geval moet dit aan die tweede div gegee word.

Kom ons doen dit - gee aan die tweede div behalwe die klas parent ook die klas clearfix en vir hierdie nuwe klas stel die eienskap clear in die waarde both - die oorvleueling van die prentjie sal verdwyn:

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

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

.clearfix {
	clear: both;
}

Die naam clearfix is algemeen aanvaar, dus gebruik dit in die toekoms.