O efeito de floats no elemento pai no CSS

Suponha agora que temos uma div, dentro da qual há uma imagem. Vamos definir uma borda para a div, e por enquanto não vamos definir a propriedade float para a imagem.

Vamos ver como isso ficará no navegador:

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

cssdiv {
  border: 1px solid red;
}

Результат:

Agora, vamos definir a propriedade float para a imagem com o valor left. Neste caso, algo surpreendente acontecerá - a altura do elemento pai desaparecerá, sua borda inferior começará imediatamente após a superior, e a imagem vazará para fora do seu elemento pai pela parte inferior:

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

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

Результат:

Assim, elementos aos quais é definida a propriedade float não expandem a altura do seu elemento pai.

Vamos alterar o valor da propriedade float de left para right. O comportamento do elemento pai não mudará, mas a imagem começará a flutuar para a direita:

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

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

Результат: