Peldošie elementi zem tagiem CSS

Pieņemsim, ka mums šobrīd ir divi rindkopas un attēls, ievietots pirmajā rindkopā. Pieņemsim, ka šim attēlam mums ir iestatīts īpašība float ar vērtību right, kā arī daļēja caurspīdīgums:

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

Un tagad ievietosim HTML kodā attēlu aiz pirmās rindkopas un paskatīsimies, kas notiks:

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

Kā mēs redzam, attēlu aptek otrās rindkopas teksts, bet ne pirmās.

Pārvietosim mūsu attēlu pavisam aiz otrās rindkopas. Šajā gadījumā tas peldēs labajā pusē, bet nekādas aptekšanas nebūs:

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

Izrādās, ka attēlu aptecēs tikai tie elementi, kas atrodas zem tā, bet ne tie, kas atrodas virs tā.