Comportamiento de los floats en el elemento padre en CSS

Supongamos ahora que tenemos un div, dentro del cual hay una imagen. Al div le asignaremos un borde, y a la imagen por ahora no le asignaremos la propiedad float.

Veamos cómo se verá esto en el navegador:

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

cssdiv {
  border: 1px solid red;
}

Результат:

Ahora asignemos a la imagen la propiedad float con el valor left. En este caso, ocurrirá algo sorprendente: la altura del padre desaparecerá, su borde inferior comenzará inmediatamente después del superior, y la imagen sobresaldrá por debajo de su elemento padre:

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

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

Результат:

Resulta que los elementos a los que se les asigna la propiedad float, no expanden la altura de su elemento padre.

Cambiemos el valor de la propiedad float de left a right. El comportamiento del padre no cambiará, pero la imagen comenzará a flotar a la derecha:

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

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

Результат: