Tekst i forelder av flytere i CSS

La oss fjerne egenskapen height for div-en og sette en liten tekst foran bildet.

I dette tilfellet vil høyden på div-en vår være lik høyden på teksten, og bildet vil fortsatt stikke ut av div-en:

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

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

La oss sette teksten etter bildet - resultatet forblir uendret:

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

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

La oss få bildet til å flyte til venstre - resultatet blir tilsvarende:

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

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

La oss legge til en div til nedenfor - bildet vil overlappe den også:

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

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

Hvis derimot den første div-en får så mye tekst at høyden blir større enn bildets høyde - vil den ikke overlappe den andre div-en:

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

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

Dette poenget er veldig viktig - under utvikling kan det hende at i en blokk har du ganske mye tekst, og deretter under den faktiske driften av nettstedet vil denne blokken ha mindre tekst enn planlagt. Det vil da oppstå et problem hvor flytende elementer overlapper nærliggende blokker.