CSS-тегі float қасиетіне кіріспе

Бізде ұзын мәтіні бар бір див болсын. Осы мәтінің басына сурет салайық:

<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;
}

Ұзын мәтін алыңыз. Мәтіннің басына бір сурет салыңыз, ал ортасына - басқа сурет салыңыз. Бірінші суреттің сол жақта, ал екінші суреттің оң жақта қалқып тұруы үшін жасаңыз.