Ακύρωση της πλεύσης με την ιδιότητα clear στο CSS

Για την επίλυση ενός τέτοιου προβλήματος υπάρχει μια ειδική ιδιότητα clear, που ακυρώνει την πλεύση. Η τιμή left ακυρώνει την πλεύση αριστερά, η τιμή right - δεξιά, και η τιμή both - και από τις δύο πλευρές. Αυτή η τιμή χρησιμοποιείται πιο συχνά.

Επομένως, η ιδιότητα clear ακυρώνει την πλεύση. Στην περίπτωσή μας, αυτό θα μας επιτρέψει να κάνουμε έτσι, ώστε η πλέουσα εικόνα από το πρώτο div να μην πέφτει πάνω στο δεύτερο div.

Σε αυτή την περίπτωση, το clear πρέπει να δοθεί σε εκείνο το στοιχείο, πάνω στο οποίο δεν πρέπει να πέφτουν τα πλέοντα στοιχεία, δηλαδή στην περίπτωσή μας αξίζει να δοθεί στο δεύτερο div.

Ας το κάνουμε - ας δώσουμε στο δεύτερο div εκτός από την κλάση parent και την κλάση clearfix και για αυτή τη νέα κλάση να ορίσουμε την ιδιότητα clear με τιμή both - η επικάλυψη της εικόνας θα εξαφανιστεί:

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

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

.clearfix {
	clear: both;
}

Το όνομα clearfix είναι ευρέως αποδεκτό, οπότε στο μέλλον χρησιμοποιήστε ακριβώς αυτό.