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:

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

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

Laitetaan teksti kuvan jälkeen - tulos ei muutu:

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

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

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

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

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

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

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

div {
	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:

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

div {
	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.