Οι ιδιότητες float και clear χρησιμοποιούνται για τον έλεγχο της διάταξης των στοιχείων σε μια ιστοσελίδα.
Η ιδιότητα float χρησιμοποιείται για να “αποσπάσει” ένα στοιχείο από την κανονική ροή του εγγράφου και να το τοποθετήσει είτε στα αριστερά είτε στα δεξιά του γονικού στοιχείου. Αυτό επιτρέπει στα άλλα στοιχεία να τοποθετηθούν γύρω από το στοιχείο που έχει την ιδιότητα float.
Η ιδιότητα clear χρησιμοποιείται για να δηλώσει ότι ένα στοιχείο δεν θα πρέπει να έρθει δίπλα σε κάποιο στοιχείο με float. Αυτό είναι χρήσιμο όταν θέλουμε να εξασφαλίσουμε ότι ένα στοιχείο θα είναι κάτω από ένα άλλο στοιχείο που έχει float.
Παράδειγμα χρήσης των ιδιοτήτων float και clear:
HTML:
<div class="container"> <!-- Αριστερή στήλη --> <div class="left-column">Left Column</div> <!-- Δεξιά στήλη --> <div class="right-column">Right Column</div> <!-- Στοιχείο για καθαρισμό --> <div class="clear"></div> </div>
CSS:
.container {
/* Ορίζει το πλάτος του στοιχείου σε 500px */
width: 500px;
}
.left-column {
/* Χρησιμοποιεί τον αριστερό προσανατολισμό για τον ευθυγραμμισμό του στοιχείου */
float: left;
/* Ορίζει το πλάτος του στοιχείου σε 200px */
width: 200px;
/* Ορίζει το ύψος του στοιχείου σε 200px */
height: 200px;
/* Ορίζει το χρώμα φόντου του στοιχείου σε κόκκινο */
background-color: red;
}
.right-column {
/* Χρησιμοποιεί τον δεξί προσανατολισμό για τον ευθυγραμμισμό του στοιχείου */
float: right;
/* Ορίζει το πλάτος του στοιχείου σε 200px */
width: 200px;
/* Ορίζει το ύψος του στοιχείου σε 200px */
height: 200px;
/* Ορίζει το χρώμα φόντου του στοιχείου σε μπλε */
background-color: blue;
}
.clear {
/* Καθαρίζει τον ευθυγραμμισμό στοιχείων αριστερά και δεξιά */
clear: both;
}
Σε αυτό το παράδειγμα, ο γονικός περιέκτης .container έχει μια πλάτος 500px. Τα παιδιά του, .left-column και .right-column, έχουν ιδιότητα float η μία αριστερά και η άλλη δεξιά αντίστοιχα. Αυτό καθιστά τα δύο στοιχεία να ευθυγραμμιστούν δίπλα-δίπλα. Το στοιχείο με κλάση .clear έχει ιδιότητα clear με τιμή both, γεγονός που εξασφαλίζει ότι κανένα άλλο στοιχείο δεν θα έρθει δίπλα στα δύο που έχουν float.
[adinserter block=”2″]
Καθώς τα στοιχεία .left-column και .right-column έχουν float, ο γονικός περιέκτης .container χάνει το ύψος των παιδιών του. Για να διορθώσουμε αυτό το πρόβλημα, προσθέτουμε ένα καθαριστικό στοιχείο .clear με την ιδιότητα clear για να “καθαρίσουμε” τα float και να επαναφέρουμε το ύψος του γονικού περιέκτη.
Η ιδιότητα float στο CSS χρησιμοποιείται για να τοποθετήσει και να μορφοποιήσει περιεχόμενο, όπως εικόνες, επιτρέποντάς του να αποκλίνει αριστερά ή δεξιά του κειμένου ενός γονικού στοιχείου.
Η ιδιότητα float μπορεί να έχει μία από τις ακόλουθες τιμές:
left: Το στοιχείο αποκλίνει αριστερά του γονικού στοιχείου του.right: Το στοιχείο αποκλίνει δεξιά του γονικού στοιχείου του.none: Το στοιχείο δεν αποκλίνει και εμφανίζεται ακριβώς εκεί που βρίσκεται στο κείμενο. Αυτή είναι η προεπιλεγμένη τιμή.inherit: Το στοιχείο κληρονομεί την τιμή αποκλισης από τον γονέα του.
Μία από τις απλούστερες χρήσεις της ιδιότητας float είναι να επιτρέπει στο κείμενο να τυλίγει γύρω από εικόνες. Με τη χρήση της float, μπορούμε να ευθυγραμμίσουμε την εικόνα αριστερά ή δεξιά και το κείμενο θα τοποθετηθεί στην αντίστοιχη πλευρά της εικόνας.
Παράδειγμα:
HTML:
<div class="container"> <img src="image.jpg" alt="Example Image" class="float-right"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquam tortor elit, at placerat ipsum volutpat ut. Nullam efficitur massa non urna mattis, vitae rhoncus odio porta. Sed gravida dolor eget nisi hendrerit aliquet. Donec vel dapibus mi. Integer volutpat luctus convallis. Sed finibus, neque vitae commodo mattis, lectus massa auctor risus, sed euismod mi dui sed nisi.</p> </div>
CSS:
.float-right {
/* Χρησιμοποιεί τον float για να τοποθετήσει το στοιχείο δεξιά */
float: right;
/* Προσθέτει περιθώριο 10px */
margin: 10px;
}
Σε αυτό το παράδειγμα, το στοιχείο <img> έχει την κλάση .float-right, η οποία έχει την ιδιότητα float με την τιμή right. Αυτό σημαίνει ότι η εικόνα θα αποκλίνει δεξιά του γονικού περιέκτη της. Επιπλέον, χρησιμοποιείται και η ιδιότητα margin για να προσθέσει μια απόσταση 10px ανάμεσα στην εικόνα και τα γειτονικά στοιχεία.
Αυτό το παράδειγμα θα τοποθετήσει την εικόνα στα δεξιά του παραγράφου, επιτρέποντας στο υπόλοιπο κείμενο να τυλίγεται γύρω από αυτήν.
Παράδειγμα:
HTML:
<div class="container"> <img src="image.jpg" alt="Example Image" class="float-left"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquam tortor elit, at placerat ipsum volutpat ut. Nullam efficitur massa non urna mattis, vitae rhoncus odio porta. Sed gravida dolor eget nisi hendrerit aliquet. Donec vel dapibus mi. Integer volutpat luctus convallis. Sed finibus, neque vitae commodo mattis, lectus massa auctor risus, sed euismod mi dui sed nisi.</p> </div>
CSS:
/* Ορίζει τον κανόνα .float-left για στοιχεία με αριστερή ευθυγράμμιση */
.float-left {
/* Εφαρμόζει το float: left για αριστερή ευθυγράμμιση */
float: left;
/* Προσθέτει περιθώριο 10px */
margin: 10px;
}
Σε αυτό το παράδειγμα, το στοιχείο <img> έχει την κλάση .float-left, η οποία έχει την ιδιότητα float με την τιμή left. Αυτό σημαίνει ότι η εικόνα θα αποκλίνει αριστερά του γονικού περιέκτη της. Επιπλέον, χρησιμοποιείται και η ιδιότητα margin για να προσθέσει μια απόσταση 10px ανάμεσα στην εικόνα και τα γειτονικά στοιχεία.
Αυτό το παράδειγμα θα τοποθετήσει την εικόνα στα αριστερά του παραγράφου, επιτρέποντας στο υπόλοιπο κείμενο να τυλίγεται γύρω από αυτήν.
[adinserter block=”3″]
Παράδειγμα:
HTML:
<div class="container"> <img src="image.jpg" alt="Example Image" class="no-float"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquam tortor elit, at placerat ipsum volutpat ut. Nullam efficitur massa non urna mattis, vitae rhoncus odio porta. Sed gravida dolor eget nisi hendrerit aliquet. Donec vel dapibus mi. Integer volutpat luctus convallis. Sed finibus, neque vitae commodo mattis, lectus massa auctor risus, sed euismod mi dui sed nisi.</p> </div>
CSS:
.no-float {
/* Απενεργοποιεί το float για το στοιχείο */
float: none;
}
Σε αυτό το παράδειγμα, το στοιχείο <img> έχει την κλάση .no-float, η οποία έχει την ιδιότητα float με την τιμή none. Αυτό σημαίνει ότι η εικόνα δεν θα αποκλίνει κάπου αλλά θα εμφανίζεται ακριβώς εκεί που βρίσκεται στο κείμενο.
Σε αυτήν την περίπτωση, η εικόνα δεν θα περιτυλίξει το κείμενο και θα εμφανιστεί ακριβώς κάτω από το κείμενο που την προηγείται.
Παράδειγμα:
HTML:
<div class="container"> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> </div>
CSS:
.box {
/* Χρησιμοποιείται η ιδιότητα float για να τοποθετηθεί το στοιχείο αριστερά */
float: left;
/* Ορίζει το πλάτος του στοιχείου σε 200px */
width: 200px;
/* Ορίζει το ύψος του στοιχείου σε 200px */
height: 200px;
/* Προσθέτει περιθώριο δεξιά */
margin-right: 10px;
/* Ορίζει το χρώμα του φόντου σε #f2f2f2 (ανοιχτό γκρι) */
background-color: #f2f2f2;
}
Σε αυτό το παράδειγμα, οι τρεις <div> στοιχεία με κλάση .box έχουν την ιδιότητα float με την τιμή left. Αυτό επιτρέπει στα στοιχεία να ευθυγραμμιστούν ο ένας δίπλα στον άλλο, αντί να εμφανιστούν πάνω από τον άλλο.
Καθένα από τα στοιχεία έχει ένα πλάτος (width) και ύψος (height) ορισμένα για να καθορίσουν το μέγεθος του κάθε κουτιού. Ορίζουμε επίσης ένα margin-right για να προσθέσουμε λίγο κενό μεταξύ των στοιχείων.
Με αυτήν την εφαρμογή, τα τρία κουτιά θα ευθυγραμμιστούν ο ένας δίπλα στον άλλο, δημιουργώντας έναν οριζόντιο διάταξη.
Όταν χρησιμοποιούμε την ιδιότητα float σε ένα στοιχείο και επιθυμούμε να το επόμενο στοιχείο να βρίσκεται κάτω από αυτό και όχι στα αριστερά ή δεξιά του, απαιτείται η χρήση της ιδιότητας clear.
Η ιδιότητα clear καθορίζει τη συμπεριφορά του στοιχείου που βρίσκεται δίπλα σε ένα αποκλίνον στοιχείο στα αριστερά ή δεξιά.
Η ιδιότητα clear μπορεί να έχει μία από τις παρακάτω τιμές:
- none: Το στοιχείο δεν απομακρύνεται πιο κάτω από τα αποκλίνοντα στοιχεία στα αριστερά ή δεξιά. Αυτή είναι η προεπιλεγμένη τιμή.
- left: Το στοιχείο απομακρύνεται πιο κάτω από τα αποκλίνοντα στοιχεία στα αριστερά.
- right: Το στοιχείο απομακρύνεται πιο κάτω από τα αποκλίνοντα στοιχεία στα δεξιά.
- both: Το στοιχείο απομακρύνεται πιο κάτω από τα αποκλίνοντα στοιχεία τόσο στα αριστερά όσο και στα δεξιά.
- inherit: Το στοιχείο κληρονομεί την τιμή της ιδιότητας clear από τον γονέα του.
Όταν απενεργοποιούμε την ιδιότητα float, πρέπει να αντιστοιχίσουμε την ιδιότητα clear με την τιμή της ιδιότητας float: Αν ένα στοιχείο αποκλίνει προς τα αριστερά, τότε πρέπει να ορίσουμε την ιδιότητα clear με την τιμή “left”. Έτσι, το αποκλίνον στοιχείο θα συνεχίσει να αποκλίνει, αλλά το στοιχείο που έχει την ιδιότητα clear θα εμφανίζεται κάτω από αυτό στην ιστοσελίδα.
Παράδειγμα:
<div style="float: left; width: 200px; height: 200px; background-color: red;"></div> <div style="clear: left;"></div>
Στο παραπάνω παράδειγμα, το πρώτο <div> έχει αποκλιθεί προς τα αριστερά με τη χρήση του float: left. Το δεύτερο <div> έχει το clear: left, γεγονός που οδηγεί στο να εμφανιστεί κάτω από το πρώτο <div>. Έτσι, το δεύτερο <div> καθαρίζει το αριστερό float και τοποθετείται κάτω από αυτό στην ιστοσελίδα.
Η τεχνική clearfix
Αν ένα αποκλίνον στοιχείο έχει ύψος μεγαλύτερο από το στοιχείο που το περιέχει, τότε θα “ξεπερνάει” έξω από τον περιέκτη του. Μπορούμε να προσθέσουμε μια τεχνική clearfix για να λύσουμε αυτό το πρόβλημα:
.clearfix::after {
/* Προσθέτει κενό περιεχόμενο μετά του στοιχείου */
content: "";
/* Ορίζει την εμφάνιση ως τύπο "table" */
display: table;
/* Εκκαθαρίζει τα floats από αριστερά και δεξιά */
clear: both;
}
Η παραπάνω CSS κανόνας ορίζει έναν ψευδοστοιχείο (::after) για το στοιχείο με την κλάση “clearfix”. Το ψευδοστοιχείο δημιουργεί ένα καθαρισμό (clear) και καθιστά το στοιχείο clearfix να “αποκαθαρίζει” τα αποκλίνοντα στοιχεία του.
Για να χρησιμοποιήσετε την τεχνική clearfix, προσθέστε την κλάση “clearfix” στο στοιχείο που περιέχει τα αποκλίνοντα στοιχεία.
Παράδειγμα:
<div class="clearfix"> <div style="float: left; width: 200px; height: 300px; background-color: red;"></div> </div>
Στο παραπάνω παράδειγμα, ο εξωτερικός <div> έχει την κλάση “clearfix”, που εφαρμόζει την τεχνική clearfix. Έτσι, αν το εσωτερικό αποκλίνον <div> έχει ύψος μεγαλύτερο από τον εξωτερικό <div>, ο καθαρισμός που ορίζεται με την clearfix θα εξασφαλίσει ότι το εσωτερικό <div> δεν θα ξεπεράσει έξω από τον εξωτερικό περιέκτη του.
[adinserter block=”4″]
Για να χρησιμοποιήσετε αυτήν τη μέθοδο clearfix, προσθέστε την κλάση “container” στο στοιχείο που περιέχει τα αποκλίνοντα στοιχεία.
Παράδειγμα:
<div class="container"> <div style="float: left; width: 200px; height: 300px; background-color: red;"></div> </div>
Στο παραπάνω παράδειγμα, το εξωτερικό <div> έχει την κλάση “container”, που εφαρμόζει τη μέθοδο clearfix. Έτσι, αν το εσωτερικό αποκλίνον <div> έχει ύψος μεγαλύτερο από τον εξωτερικό <div>, ο καθαρισμός που ορίζεται με την clearfix θα εξασφαλίσει ότι το εσωτερικό <div> δεν θα ξεπεράσει έξω από τον εξωτερικό περιέκτη του.
Για να δημιουργήσετε ένα πλέγμα κουτιών με ίσο πλάτος, μπορείτε να χρησιμοποιήσετε την ιδιότητα float για τα κουτιά και να τους ορίσετε το ίδιο πλάτος.
HTML:
<div class="grid-container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div>
CSS:
.grid-container {
/* Ορίζει το πλάτος του grid container σε 100% */
width: 100%;
}
.box {
/* Κάνει το στοιχείο να αιωρείται αριστερά */
float: left;
/* Ορίζει το πλάτος του στοιχείου σε 33.33% */
width: 33.33%;
/* Ορίζει το ύψος του στοιχείου σε 200px */
height: 200px;
/* Ορίζει το χρώμα του φόντου σε γκρι */
background-color: gray;
/* Ορίζει το περιθώριο του στοιχείου στα 5px */
margin: 5px;
}
Στο παραπάνω παράδειγμα, το .grid-container είναι ο περιέκτης του πλέγματος και ορίζεται να έχει πλήρη πλάτος. Τα .box είναι τα κουτιά που περιέχονται στο πλέγμα. Με το float: left, τα κουτιά αποκλίνονται προς τα αριστερά και με το width: 33.33%, καθορίζεται ότι κάθε κουτί πρέπει να έχει το ίδιο πλάτος που αντιστοιχεί σε ένα τρίτο του πλάτους του περιέκτη. Ορίζοντας επίσης το margin: 5px, ορίζουμε ένα ανθυγιεινό περιθώριο γύρω από τα κουτιά.
Με αυτόν τον τρόπο, τα κουτιά θα ευθυγραμμιστούν σε ένα πλέγμα με ίσα πλάτη και με απόσταση 5px μεταξύ τους.
Το πλέγμα των κουτιών μπορεί επίσης να χρησιμοποιηθεί για να εμφανιστούν οι εικόνες δίπλα-δίπλα:
HTML:
<div class="image-grid"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> </div>
CSS:
.image-grid {
/* Ορίζει το πλάτος του στοιχείου στο 100% του παραγόμενου χώρου */
width: 100%;
}
.image-grid img {
/* Αριστερή αλλίωση των εικόνων */
float: left;
/* Ορίζει το πλάτος των εικόνων στο 33.33% του πλάτους του γονικού στοιχείου */
width: 33.33%;
/* Αυτόματο ύψος των εικόνων για διατήρηση των αρχικών αναλογιών */
height: auto;
/* Περιθώριο γύρω από τις εικόνες */
margin: 5px;
}
Στο παραπάνω παράδειγμα, το .image-grid είναι ο περιέκτης του πλέγματος για τις εικόνες. Ορίζεται να έχει πλήρη πλάτος. Οι εικόνες <img> είναι τα στοιχεία που περιέχονται στο πλέγμα. Με το float: left, οι εικόνες αποκλίνονται προς τα αριστερά και με το width: 33.33%, καθορίζεται ότι κάθε εικόνα πρέπει να έχει το ίδιο πλάτος που αντιστοιχεί σε ένα τρίτο του πλάτους του περιέκτη. Αναγκαίο να αναφέρουμε ότι το ύψος (height) ορίζεται σε auto για να διατηρηθεί η αρχική αναλογία της εικόνας. Το margin: 5px ορίζει ένα ανθυγιεινό περιθώριο γύρω από τις εικόνες.
Με αυτόν τον τρόπο, οι εικόνες θα εμφανίζονται δίπλα-δίπλα σε ένα πλέγμα με ίσα πλάτη και με απόσταση 5px μεταξύ τους.
Στο προηγούμενο παράδειγμα, μάθατε πώς να ευθυγραμμίσετε τα κουτιά πλευρικά με ίσο πλάτος. Ωστόσο, δεν είναι εύκολο να δημιουργήσετε κουτιά με ίσο ύψος όταν χρησιμοποιείτε float. Ένα γρήγορο επιδιορθωτικό μέτρο είναι να ορίσετε ένα σταθερό ύψος, όπως στο παρακάτω παράδειγμα:
HTML:
<div class="equal-height-grid"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div>
CSS:
.equal-height-grid {
/* Ορίζει το πλάτος του στοιχείου σε 100% του παρόντος γονικού στοιχείου */
width: 100%;
/* Ορίζει τον τύπο εμφάνισης του στοιχείου ως flex */
display: flex;
}
.equal-height-grid .box {
/* Ορίζει το flex-grow για να μοιράσει το διαθέσιμο χώρο ομοιόμορφα μεταξύ των στοιχείων */
flex: 1;
/* Ορίζει το ύψος του στοιχείου σε 200px */
height: 200px;
/* Ορίζει το χρώμα του φόντου σε γκρι */
background-color: gray;
/* Ορίζει το περιθώριο γύρω από το στοιχείο */
margin: 5px;
}
Στο παραπάνω παράδειγμα, το .equal-height-grid είναι ο περιέκτης του πλέγματος και ορίζεται να έχει πλήρη πλάτος. Χρησιμοποιούμε το display: flex; για να εφαρμόσουμε την ιδιότητα Flexbox. Τα .box είναι τα κουτιά που περιέχονται στο πλέγμα. Με το flex: 1;, τα κουτιά κατανέμονται αυτόματα στον διαθέσιμο χώρο, με ίσα μερίδια. Ορίζουμε επίσης το height: 200px; για να ορίσουμε ένα σταθερό ύψος για τα κουτιά. Το margin: 5px; ορίζει ένα ανθυγιεινό περιθώριο γύρω από τα κουτιά.
Με αυτόν τον τρόπο, τα κουτιά θα εμφανίζονται δίπλα-δίπλα με ίσο ύψος και με απόσταση 5px μεταξύ τους.
Μπορείτε επίσης να χρησιμοποιήσετε το float με μια λίστα υπερσυνδέσεων για να δημιουργήσετε ένα οριζόντιο μενού:
HTML:
<ul class="navigation-menu"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul>
CSS:
.navigation-menu {
list-style: none;
margin: 0;
padding: 0;
}
.navigation-menu li {
float: left;
margin-right: 10px;
}
.navigation-menu li a {
display: block;
padding: 5px 10px;
background-color: gray;
color: white;
text-decoration: none;
}
.navigation-menu li a:hover {
background-color: darkgray;
}
Στο παραπάνω παράδειγμα, χρησιμοποιούμε την <ul> για να δημιουργήσουμε μια λίστα μενού. Με το list-style: none; καθορίζουμε ότι η λίστα να μην έχει κουκκίδες. Οι <li> είναι τα στοιχεία της λίστας μας. Με το float: left;, τα στοιχεία ευθυγραμμίζονται οριζόντια. Το margin-right: 10px; ορίζει ένα περιθώριο δεξιά από κάθε στοιχείο, για να δημιουργηθεί απόσταση μεταξύ των στοιχείων του μενού.
Για τα <a> στοιχεία εντός κάθε <li>, με το display: block; καθορίζουμε ότι θα εμφανίζονται ως μπλοκ, προκειμένου να μπορέσουμε να τους δώσουμε πλάτος και ύψος. Το padding: 5px 10px; ορίζει ένα εσωτερικό περιθώριο γύρω α
πό το κείμενο των συνδέσεων. Το background-color: gray; και το color: white; καθορίζουν το χρώμα του φόντου και το χρώμα του κειμένου αντίστοιχα. Τέλος, το text-decoration: none; αφαιρεί την υπογράμμιση από τις συνδέσεις.
Όταν το ποντίκι τοποθετηθεί πάνω από μια σύνδεση (<a>), με τον κανόνα :hover, καθορίζουμε το χρώμα του φόντου να αλλάξει σε darkgray, δίνοντας έτσι ένα εφέ κατάδειξης όταν το ποντίκι είναι επάνω από μια σύνδεση.