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:

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

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

Результат:

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

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

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

Результат:

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

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

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

Результат:

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

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

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

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

cssdiv {
  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á.