CSSда float элементларининг теглар орқали ўта ошиши

Энди бизда матн абзацларда жойлаштан бўлсин, ва float хусусияти берилган расм бу абзацлар устида жойлашган деб фараз қилайлик. Бунда ҳолда ҳамма нарха ишлаганидек ишлайди - бошқа тегларнинг мавжудлиги ўрашишта халақит бермайди:

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

div {
	width: 400px;
	border: 1px solid red;
	text-align: justify;
}
img {
	float: left;
}

Энди биринчи абзацда матн кам бўлсин деб фараз қилайлик - бунда ҳолда расм иккинчи абзацга ҳам кириб қолади:

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

div {
	width: 400px;
	border: 1px solid red;
	text-align: justify;
}
img {
	float: left;
}