Действие флоатов на родителя в CSS

Пусть теперь у нас есть див, в котором лежит картинка. Диву зададим границу, а картинке пока не будем задавать свойство float.

Давайте посмотрим, как это будет выглядеть в браузере:

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

cssdiv {
  border: 1px solid red;
}

Результат:

Теперь давайте установим картинке свойство float в значении left. В этом случае произойдет удивительная вещь - высота родителя исчезнет, его нижняя граница будет начинаться сразу после верхней, а картинка вылезет снизу за своего родителя:

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

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

Результат:

Получается, что элементы, которым задано свойство float, не расширяют своего родителя по высоте.

Давайте свойству float вместо left напишем значение right. Поведение родителя не изменится, но картинка начнет плавать справа:

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

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

Результат: