Kelluvien elementtien peruutus clear-ominaisuudella CSS:ssä

Tällaisen ongelman ratkaisemiseksi on olemassa erityinen ominaisuus clear, joka peruuttaa kelluvien elementtien vaikutuksen. Arvo left peruuttaa kelluvien elementtien vaikutuksen vasemmalta, arvo right - oikealta, ja arvo both - molemmilta puolilta. Tätä arvoa käytetään useimmiten.

Eli ominaisuus clear peruuttaa kelluvien elementtien vaikutuksen. Meidän tapauksessamme tämä antaa meille mahdollisuuden tehdä niin, että kelluva kuva ensimmäisestä div-elementistä ei päällekkäisyydessä toiseen div-elementtiin.

Samalla clear tulee antaa sille elementille, jonka päälle kelluvat elementit eivät saa mennä, eli meidän tapauksessamme sen tulisi antaa toiselle div-elementille.

Tehdään tämä - annetaan toiselle div-elementille luokan parent lisäksi myös luokka clearfix ja tälle uudelle luokalle asetetaan ominaisuus clear arvoon both - kuvan päällekkäisyys katoaa:

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

Nimi clearfix on yleisesti hyväksytty, joten käytä tulevaisuudessa juuri sitä.