# Текст в родителе флоатов в CSS

Давайте уберем свойство `height` для дива и поставим небольшой текст перед картинкой.

В этом случае высота нашего дива будет равна высоте текста, а картинка по-прежнему вылезет за див:

`<div> text <img src="img.png" alt=""> </div>` `div { border: 1px solid red; } img { float: right; }`

:

Давайте поставим текст после картинки - результат не изменится:

`<div> <img src="img.png" alt=""> text </div>` `div { border: 1px solid red; } img { float: right; }`

:

Давайте сделаем так, чтобы картинка плавала по левому краю - результат будет аналогичным:

`<div> <img src="img.png" alt=""> text </div>` `div { border: 1px solid red; } img { float: left; }`

:

Давайте снизу добавим еще один див - картинка налезет и на него:

`<div> <img src="img.png" alt=""> text </div> <div> text </div>` `div { border: 1px solid red; } img { float: left; }`

:

Если же в первый див добавить настолько много текста, что по высоте он будет больше картинки - она не будет налезать на второй див:

`<div> <img src="img.png" alt=""> long text... </div> <div> text </div>` `div { text-align: justify; border: 1px solid red; } img { float: left; }`

:

Этот момент очень важен - при разработке может быть такое, что в каком-то блоке у вас достаточно много текста, а затем при реальной работе сайта в этом блоке будет меньше текста, чем запланировано. Получится, что в этом случае проявится проблема с налезанием плавающих элементов на соседние блоки.

← →
↑