Cancelando a flutuação com a propriedade clear em CSS

Para resolver esse problema, existe uma propriedade especial clear, que cancela a flutuação. O valor left cancela a flutuação à esquerda, o valor right - à direita, e o valor both - de ambos os lados. Este valor é o mais utilizado.

Portanto, a propriedade clear cancela a flutuação. No nosso caso, isso nos permitirá fazer com que a imagem flutuante da primeira div não invada a segunda div.

Nesse caso, o clear deve ser aplicado ao elemento que não deve ser invadido por elementos flutuantes, ou seja, no nosso caso, deve ser aplicado à segunda div.

Vamos fazer isso - vamos dar à segunda div, além da classe parent, também a classe clearfix e para esta nova classe definir a propriedade clear com o valor both - a sobreposição da imagem desaparecerá:

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

css.parent {
  border: 1px solid red;
}
.parent img {
  float: left;
}

.clearfix {
  clear: both;
}

Результат:

O nome clearfix é amplamente aceito, portanto, use-o daqui para frente.