Увядзенне ў уласцівасць float у CSS

Няхай у нас ёсць дыў з якім-небудзь доўгім тэкстам. Давайце ўставім у пачатак гэтага тэксту карцінку:

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

div {
	width: 400px;
	text-align: justify;
}

Як вы бачыце, ніз карцінкі размяшчаецца на першай радку тэксту, а астатняя частка сыходзіць уверх. Справа ад карцінкі атрымліваецца вялікае пустое прастору. Давайце зробім так, каб тэкст запоўніў гэта пустое прастору. Для гэтага карцінцы паставім уласцівасць float у значэнні left:

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

div {
	width: 400px;
	text-align: justify;
}
img {
	float: left;
}

Такім чынам, цяпер карцінка плавае злева, а тэкст абцякае яе адпаведна справа. Пры гэтым пустое прастору збоку ад карцінкі знікла.

Можна прымусіць карцінку плаваць не злева, а справа. Для гэтага float усталюем у значэнне right:

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

div {
	width: 400px;
	text-align: justify;
}
img {
	float: right;
}

Вазьміце доўгі тэкст. Устаўце ў пачатак тэксту адну карцінку, а ў сярэдзіну - другую. Зрабіце так, каб першая карцінка плавала злева, а другая - справа.