Текст в родител на флоатинг елементи в 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;
}

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