Текст в родител на флоатинг елементи в CSS

Нека премахнем свойството height за дива и поставим малко текст преди картинката.

В този случай височината на нашия див ще бъде равна на височината на текста, а картинката пак ще излезе извън дива:

html<div>
  text
  <img src="img.png" alt="">
</div>

cssdiv {
  border: 1px solid red;
}
img {
  float: right;
}

Результат:

Нека поставим текста след картинката - резултатът няма да се промени:

html<div>
  <img src="img.png" alt="">
  text
</div>

cssdiv {
  border: 1px solid red;
}
img {
  float: right;
}

Результат:

Нека направим така, че картинката да плава в ляво - резултатът ще бъде аналогичен:

html<div>
  <img src="img.png" alt="">
  text
</div>

cssdiv {
  border: 1px solid red;
}
img {
  float: left;
}

Результат:

Нека отдолу добавим още един див - картинката ще се нахлуе и върху него:

html<div>
  <img src="img.png" alt="">
  text
</div>
<div>
  text
</div>

cssdiv {
  border: 1px solid red;
}
img {
  float: left;
}

Результат:

Ако в първия див се добави толкова много текст, че по височина да е по-голям от картинката - тя няма да се нахлуе върху втория див:

html<div>
  <img src="img.png" alt="">
  some long text
</div>
<div>
  text
</div>

cssdiv {
  text-align: justify;
  border: 1px solid red;
}
img {
  float: left;
}

Результат:

Този момент е много важен - при разработката може да се случи, че в някой блок имате достатъчно много текст, а после при реалната работа на сайта в този блок ще има по-малко текст, отколкото е планирано. Ще се окаже, че в този случай ще се прояви проблем с нахлуването на плаващи елементи върху съседни блокове.