Κινητά Στοιχεία κάτω από Ετικέτες στο 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;
}

Αποδεικνύεται ότι η εικόνα θα περικυκλώνεται μόνο από αυτά τα στοιχεία που βρίσκονται κάτω από αυτή, αλλά όχι από αυτά που βρίσκονται πάνω από αυτή.