Texto no pai de floats em CSS

Vamos remover a propriedade height para a div e colocar um pequeno texto antes da imagem.

Neste caso, a altura da nossa div será igual à altura do texto, e a imagem continuará a vazar para fora da div:

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

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

Vamos colocar o texto depois da imagem - o resultado não mudará:

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

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

Vamos fazer com que a imagem flutue para a esquerda - o resultado será análogo:

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

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

Vamos adicionar outra div abaixo - a imagem invadirá ela também:

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

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

Se, no entanto, adicionarmos texto suficiente na primeira div, de modo que sua altura seja maior que a da imagem - ela não invadirá a segunda div:

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

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

Este ponto é muito importante - durante o desenvolvimento pode acontecer que em algum bloco você tenha texto suficiente, mas depois, durante o funcionamento real do site, esse bloco terá menos texto do que o planejado. O resultado será que, nesse caso, o problema de elementos flutuantes invadindo blocos adjacentes se manifestará.