Voolimise tühistamine CSS-i omadusega clear

Sellise probleemi lahendamiseks on olemas spetsiaalne omadus clear, mis tühistab voolimise. Väärtus left tühistab voolimise vasakult, väärtus right - paremalt, ja väärtus both - mõlemalt poolt. Seda väärtust kasutatakse kõige sagedamini.

Kokkuvõttes, omadus clear tühistab voolimise. Meie puhul võimaldab see meil teha nii, et ujuv pilt esimesest div'ist ei suruks teise div'i peale.

Samal ajal tuleks clear anda sellele elemendile, mille peale ujuvad elemendid ei tohi suruda, see tähendab meie puhul tuleks see anda teisele div'ile.

Teeme seda - anname teisele div'ile klassi parent kõrval ka klassi clearfix ja selle uue klassi jaoks määrame omaduse clear väärtuseks both - pildi peale surumine kaob:

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

Nimetus clearfix on üldiselt aktsepteeritud, seetõttu kasutage edaspidi just seda.