Teksti float-elementtien vanhemmassa CSS:ssä

Poistetaan height-ominaisuus div-elementistä ja laitetaan pieni teksti kuvan eteen.

Tässä tapauksessa div-elementtimme korkeus on yhtä suuri kuin tekstin korkeus, ja kuva yhä valuu div-elementin ulkopuolelle:

html<div>
  teksti
  <img src="img.png" alt="">
</div>

cssdiv {
  border: 1px solid red;
}
img {
  float: right;
}

Результат:

Laitetaan teksti kuvan jälkeen - tulos ei muutu:

html<div>
  <img src="img.png" alt="">
  teksti
</div>

cssdiv {
  border: 1px solid red;
}
img {
  float: right;
}

Результат:

Tehdään niin, että kuva kelluu vasempaan reunaan - tulos on vastaava:

html<div>
  <img src="img.png" alt="">
  teksti
</div>

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

Результат:

Lisätään alapuolelle toinen div-elementti - kuva tunkeutuu sen päälle:

html<div>
  <img src="img.png" alt="">
  teksti
</div>
<div>
  teksti
</div>

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

Результат:

Jos ensimmäiseen div-elementtiin lisätään niin paljon tekstiä, että sen korkeus on suurempi kuin kuvan - se ei tunkeudu toisen div-elementin päälle:

html<div>
  <img src="img.png" alt="">
  some long text
</div>
<div>
  teksti
</div>

cssdiv {
  text-align: justify;
  border: 1px solid red;
}
img {
  float: left;
}

Результат:

Tämä kohta on erittäin tärkeä - kehitystyön aikana voi olla niin, että jossain lohkossa on riittävän paljon tekstiä, mutta sitten sivuston todellisessa käytössä tässä lohkossa on vähemmän tekstiä kuin suunniteltu. Käy niin, että tässä tapauksessa ilmenee ongelma kelluvien elementtien tunkeutumisesta viereisiin lohkoihin.