мое новое расписание: пн-пт с 8.00 по 16.00 по москве, сб и вс - выходные; после 16.00 и на вых. отвечаю по возможности

Клиарфикс и высота родителя

Давайте оставим один див с классом 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; }

: