Муқаддима ба хосияти 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;
}

Як матни дарозро гиред. Дар аввали матн як акс ва дар миёнаш акси дигарро гузоред. Чунон кунед, ки акси аввал дар чап шиноварӣ кунад ва акси дуюм дар рост.