Тэкст у бацьку флоатаў у 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;
}

Гэты момант вельмі важны - пры распрацоўцы можа быць такое, што ў якім-сі блоку ў вас дастаткова многа тэксту, а затым пры рэальнай працы сайта ў гэтым блоку будзе менш тэксту, чым запланавана. Атрымаецца, што ў гэтым выпадку праявіцца праблема з налезаннем плаваючых элементаў на суседнія блокі.