Элементҳои шиноваршаванда дар зери тегҳо дар CSS

Бигзор ҳоло мо ду абзас ва тасвир дорем, ки дар абзаси аввал ҷойгир аст. Бигзор ба ин тасвир хосияти float бо арзиши right ва инчунин нимшаффофӣ таъин шудааст:

<div>
	<p>
		<img src="img.png" alt="">
		Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
	</p>
	<p>
		some long text
	</p>
</div>

div {
	border: 1px solid red;
	text-align: justify;
}
p {
	border: 1px solid green;
}
img {
	float: right;
	opacity: 0.5;
}

Ва акнун биёед дар рамзи HTML тасвирро пас аз абзаси аввал гузорем ва нигарем, ки чӣ хоҳад шуд:

<div>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
	</p>
	<img src="img.png" alt="">
	<p>
		some long text
	</p>
</div>

div {
	border: 1px solid red;
	text-align: justify;
}
p {
	border: 1px solid green;
}
img {
	float: right;
	opacity: 0.5;
}

Чунон ки мебинем, тасвирро матни абзаси дуввум об мегирад, вале абзаси аввал не.

Биёед тасвири худро тамоман пас аз абзаси дуввум гузорем. Дар ин сурат он рост шиноварӣ хоҳад кард, вале ягон обгирии матн вуҷуд нахоҳад дошт:

<div>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
	</p>
	<p>
		some long text
	</p>
	<img src="img.png" alt="">
</div>

div {
	border: 1px solid red;
	text-align: justify;
}
p {
	border: 1px solid green;
}
img {
	float: right;
	opacity: 0.5;
}

Маълум мешавад, ки танҳо он элементҳо тасвирро об хоҳанд гирифт, ки дар зери он қарор доранд, вале онҳое ки болояш қарор доранд, не.