Plūduriuojančių elementų atšaukimas naudojant CSS savybę clear

Šiai problemai spręsti yra speciali savybė clear, kuri atšaukia plūduriuojančius elementus. Reikšmė left atšaukia plūduriuojantį elementą iš kairės, reikšmė right - iš dešinės, o reikšmė both - iš abiejų pusių. Ši reikšmė ir naudojama dažniausiai.

Taigi, savybė clear atšaukia plūduriuojančius elementus. Mūsų atveju tai leis mums pasidaryti taip, kad pirmojo div plūduriuojantis paveikslėlis neužliptų ant antrojo div.

Be to, clear turėtų būti suteikta tam elementui, ant kurio neturėtų užlipti plūduriuojantys elementai, tai yra mūsų atveju ją vertėtų suteikti antrajam div.

Padarykime tai - suteikime antrajam div kartu su klase parent dar ir klasę clearfix ir šiai naujai klasei nustatykime savybę clear su reikšme both - paveikslėlio užlipimas išnyks:

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

Pavadinimas clearfix yra visuotinai priimtas, todėl ateityje naudokite būtent jį.