Текст в родителе флоатов в 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;
}
:
Этот момент очень важен - при разработке может быть такое, что в каком-то блоке у вас достаточно много текста, а затем при реальной работе сайта в этом блоке будет меньше текста, чем запланировано. Получится, что в этом случае проявится проблема с налезанием плавающих элементов на соседние блоки.