Давайте оставим один див с классом parent, уберем из него текст, оставив только плавающую картинку.
Как вы уже знаете, в этом случае высота дива схлопнется в ноль, от него останется только верхняя и нижняя граница. Картинка же вылезет за наш див снизу:
<div class="parent">
<img src="img.png" alt="">
</div>
.parent {
border: 1px solid red;
}
.parent img {
float: left;
}
:
Давайте сделаем так, чтобы плавающая картинка расширяла наш див по высоте. Для этого используется хитрый прием - поставим после картинки див без текста с классом clearfix.
Наша картинка плавающий элемент и не расширяет родителя по высоте, но див-клиарфикс - не плавающий и влияет на высоту родителя.
Так как диву-клиарфиксу задано свойство clear, то получится, что он будет отпихиваться картинкой вниз и стоять под ней, расширяя при этом родителя по высоте.
Сам див-клиарфикс пустой и не виден на экране, но при этом расширяет родителя по высоте.
Итак, давайте попробуем:
<div class="parent">
<img src="img.png" alt="">
<div class="clearfix"></div>
</div>
.parent {
border: 1px solid red;
}
.parent img {
float: left;
}
.clearfix {
clear: both;
}
: