Clearfix και ύψος γονέα στο CSS

Ας αφήσουμε ένα div με κλάση parent, αφαιρέσουμε το κείμενό του, αφήνοντας μόνο την πλωτή εικόνα. Όπως ήδη γνωρίζετε, σε αυτήν την περίπτωση το ύψος του div θα συμπιεστεί στο μηδέν, θα μείνει μόνο το πάνω και το κάτω περίγραμμα. Η εικόνα θα βγει έξω από το div μας από κάτω:

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

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

Ας κάνουμε έτσι ώστε η πλωτή εικόνα να επεκτείνει το ύψος του div μας. Για αυτό χρησιμοποιείται ένα έξυπνο τέχνασμα - ας βάλουμε μετά την εικόνα ένα div χωρίς κείμενο με κλάση clearfix.

Η εικόνα μας είναι ένα πλωτό στοιχείο και δεν επεκτείνει το ύψος του γονέα, αλλά το div clearfix - δεν είναι πλωτό και επηρεάζει το ύψος του γονέα.

Δεδομένου ότι στο div clearfix έχει οριστεί η ιδιότητα clear, θα συμβεί ότι θα σπρώχνεται από την εικόνα προς τα κάτω και θα στέκεται κάτω από αυτή, επεκτείνοντας ταυτόχρονα το ύψος του γονέα.

Το ίδιο το div clearfix είναι κενό και δεν είναι ορατό στην οθόνη, αλλά ταυτόχρονα επεκτείνει το ύψος του γονέα.

Λοιπόν, ας δοκιμάσουμε:

<div class="parent">
	<img src="img.png" alt="">
	<div class="clearfix"></div>
</div>

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

.clearfix {
	clear: both;
}