Ιδιότητα clear

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

Σύνταξη

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

Παράδειγμα

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

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

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

Παράδειγμα

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

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

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

Παράδειγμα

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

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

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

Δείτε επίσης

η ιδιότητα bottom,
που ορίζει τη θέση του κάτω άκρου του στοιχείου
η ιδιότητα top,
που ορίζει τη θέση του πάνω άκρου του στοιχείου
η ιδιότητα left,
που ορίζει τη θέση του αριστερού άκρου του στοιχείου
η ιδιότητα right,
που ορίζει τη θέση του δεξιού άκρου του στοιχείου
ο ψευδο-στοιχείο ::backdrop,
που ορίζει τη θέση μετά το πρώτο στοιχείο
η ιδιότητα caption-side,
που ορίζει τη θέση της επικεφαλίδας του πίνακα