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

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

:

←→
↑