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

Овој момент е многу важен - при развојот може да се случи во некој блок да имате доста текст, а потоа при реална работа на сајтот во овој блок да има помалку текст отколку што е планирано. Ќе испадне дека во овој случај ќе се појави проблем со проширување на пловечките елементи врз соседните блокови.