Εισαγωγή στην ιδιότητα float στο CSS

Ας υποθέσουμε ότι έχουμε ένα div με κάποιο μακρύ κείμενο. Ας εισάγουμε στην αρχή αυτού του κειμένου μια εικόνα:

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

Πάρτε ένα μακρύ κείμενο. Εισάγετε στην αρχή του κειμένου μια εικόνα, και στη μέση - μια άλλη. Κάντε έτσι ώστε η πρώτη εικόνα να επιπλέει στα αριστερά, και η δεύτερη - στα δεξιά.