Ιδιότητα clear

Η ιδιότητα clear ακυρώνει τη ροή ενός στοιχείου από άλλα, που ορίζεται από την ιδιότητα float. Μπορεί να πάρει τις ακόλουθες τιμές: none (ακυρώνει τη δράση του εαυτού της), both (ακυρώνει το float ταυτόχρονα δεξιά και αριστερά), left (ακυρώνει το float αριστερά), right (ακυρώνει το float δεξιά).

Σύνταξη

cssεπιλογέας {
  clear: none ή left ή right ή both
}

Παράδειγμα

Ας ακυρώσουμε τη ροή του κειμένου γύρω από την εικόνα από τα αριστερά:

html<img class="image" src="bg.png" alt="">
<div class="txt">
  <p>
    κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο
    κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο
    κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο
    κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο
  </p>
</div>

css.image {
  float: left;
  padding-right: 10px;
}
.txt {
  clear: left;
}

Результат:

Παράδειγμα

Τώρα ας ακυρώσουμε τη ροή του κειμένου γύρω από την εικόνα από τα δεξιά:

html<img class="image" src="bg.png" alt="">
<div class="txt">
  <p>
    κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο
    κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο
    κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο
    κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο
  </p>
</div>

css.image {
  float: right;
  padding-right: 10px;
}
.txt {
  clear: right;
}

Результат:

Παράδειγμα

Ας ακυρώσουμε τη δράση της ίδιας της ιδιότητας clear:

html<img class="image" src="bg.png" alt="">
<div class="txt">
  <p>
    κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο
    κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο
    κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο
    κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο
  </p>
</div>

css.image {
  float: right;
  padding-right: 10px;
}
.txt {
  clear: none;
}

Результат:

Δείτε επίσης