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:

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

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

.clearfix {
  clear: both;
}

Результат:

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