Η επίδραση των floats στο γονέα στο CSS

Ας υποθέσουμε τώρα ότι έχουμε ένα div, μέσα στο οποίο βρίσκεται μια εικόνα. Στο div θα ορίσουμε ένα border, ενώ στην εικόνα δεν θα ορίσουμε ακόμα την ιδιότητα float.

Ας δούμε πώς θα εμφανίζεται αυτό στον browser:

<div>
	<img src="img.png" alt="">
</div>

div {
	border: 1px solid red;
}

Τώρα ας ορίσουμε στην εικόνα την ιδιότητα float με τιμή left. Σε αυτήν την περίπτωση θα συμβεί κάτι αξιοθαύμαστο - το ύψος του γονέα θα εξαφανιστεί, το κάτω border του θα ξεκινά αμέσως μετά το πάνω, και η εικόνα θα βγει από κάτω από τον γονέα της:

<div>
	<img src="img.png" alt="">
</div>

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

Αποδεικνύεται ότι τα στοιχεία στα οποία έχει οριστεί η ιδιότητα float, δεν επεκτείνουν το ύψος του γονέα τους.

Ας αλλάξουμε την τιμή της ιδιότητας float από left σε right. Η συμπεριφορά του γονέα δεν θα αλλάξει, αλλά η εικόνα θα αρχίσει να πλέει δεξιά:

<div>
	<img src="img.png" alt="">
</div>

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