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

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