Κείμενο στο γονέα των floats στο CSS

Ας αφαιρέσουμε την ιδιότητα height για το div και ας βάλουμε ένα μικρό κείμενο πριν από την εικόνα.

Σε αυτήν την περίπτωση, το ύψος του div μας θα είναι ίσο με το ύψος του κειμένου, και η εικόνα θα εξακολουθεί να βγαίνει έξω από το div:

<div>
	κείμενο
	<img src="img.png" alt="">
</div>

div {
	border: 1px solid red;
}
img {
	float: right;
}

Ας βάλουμε το κείμενο μετά την εικόνα - το αποτέλεσμα δεν αλλάζει:

<div>
	<img src="img.png" alt="">
	κείμενο
</div>

div {
	border: 1px solid red;
}
img {
	float: right;
}

Ας κάνουμε την εικόνα να επιπλέει στα αριστερά - το αποτέλεσμα θα είναι ανάλογο:

<div>
	<img src="img.png" alt="">
	κείμενο
</div>

div {
	border: 1px solid red;
}
img {
	float: left;
}

Ας προσθέσουμε από κάτω ένα ακόμη div - η εικόνα θα πάει πάνω του:

<div>
	<img src="img.png" alt="">
	κείμενο
</div>
<div>
	κείμενο
</div>

div {
	border: 1px solid red;
}
img {
	float: left;
}

Εάν όμως στο πρώτο div προστεθεί τόσο πολύ κείμενο, ώστε σε ύψος να είναι μεγαλύτερο από την εικόνα - αυτή δεν θα πάει πάνω στο δεύτερο div:

<div>
	<img src="img.png" alt="">
	some long text
</div>
<div>
	κείμενο
</div>

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

Αυτό το σημείο είναι πολύ σημαντικό - κατά την ανάπτυξη μπορεί να συμβεί ότι σε κάποιο μπλοκ έχετε αρκετό κείμενο, και στη συνέχεια κατά τη πραγματική λειτουργία του site σε αυτό το μπλοκ θα υπάρχει λιγότερο κείμενο από όσο έχει προγραμματιστεί. Θα προκύψει, ότι σε αυτήν την περίπτωση θα εμφανιστεί το πρόβλημα της εισόδου των floating στοιχείων πάνω σε γειτονικά μπλοκ.