Tekst i forælder til floats i CSS

Lad os fjerne egenskaben height for div'en og sætte en lille tekst før billedet.

I dette tilfælde vil højden på vores div være lig med højden af teksten, og billedet vil stadig stikke ud over div'en:

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

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

Lad os sætte teksten efter billedet - resultatet ændrer sig ikke:

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

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

Lad os gøre så billedet flyder til venstre - resultatet vil være analogt:

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

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

Lad os tilføje endnu en div nederst - billedet vil overlappe den:

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

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

Hvis man derimod tilføjer så meget tekst til den første div, at dens højde er større end billedets - vil det ikke overlappe den anden div:

<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 punkt er meget vigtigt - under udvikling kan det ske, at i en bestemt blok er der en del tekst, og derefter, når sitet er i brug, vil der være mindre tekst i denne blok end planlagt. Det vil resultere i, at problemet med overlappende flydende elementer på tilstødende blokke vil blive synligt.