Περιλισθήσεις στο CSS

Ας υποθέσουμε ότι έχουμε δύο div με κλάση parent. Σε κάθε ένα από αυτά υπάρχει ένα μικρό κείμενο, και στο πρώτο div υπάρχει μια εικόνα, στην οποία έχει οριστεί η ιδιότητα float με τιμή left.

Όπως ήδη γνωρίζετε, σε αυτήν την περίπτωση η εικόνα θα επικαλύψει το δεύτερο μπλοκ:

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

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

Результат:

Ας δούμε στα επόμενα μαθήματα, πώς να αποφύγουμε μια τέτοια επικάλυψη ή περιλισθήσεις.