Текст в родител на флоатинг елементи в 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="">
some long text
</div>
<div>
text
</div>
div {
text-align: justify;
border: 1px solid red;
}
img {
float: left;
}
:
Този момент е много важен - при разработката може да се случи, че в някой блок имате достатъчно много текст, а после при реалната работа на сайта в този блок ще има по-малко текст, отколкото е планирано. Ще се окаже, че в този случай ще се прояви проблем с нахлуването на плаващи елементи върху съседни блокове.