Το Float είναι ένα από τα κρίσιμα CSS-στοιχεία. Χωρίς την κατανόηση αυτής της αρχής, δεν είναι δυνατή η δημιουργία ιστοσελίδων με βάση το CSS. Στην πραγματικότητα, το Float θα μπορούσε να μεταφραστεί πολύ όμορφα εδώ με τον όρο Ροή, που εξηγεί την κατάσταση με σαφήνεια. Ουσιαστικά, το Float σημαίνει ότι ένα στοιχείο τοποθετείται αριστερά ή δεξιά του άλλου στοιχείου. (Στην κανονική περίπτωση, το στοιχείο θα βρισκόταν κάτω από ένα άλλο στοιχείο).
Ένα πρώτο παράδειγμα θα διευκρινίσει αυτή την πτυχή.
<p><img src="bild.jpg" /> Σε αυτό το σετ υπάρχουν 12 δικές σχήματα που μπορείτε να χρησιμοποιήσετε στα φυλλάδιά σας, φόντα κ.λπ. Τα σχήματα διακρίνονται σε 18, 21 και 24 λωρίδες καθώς και διαφορετικές πλάτες ακτινών. Αυτά τα προεπιλεγμένα είναι μια καλή βάση για όμορφα εφέ στις διατάξεις και τις εικόνες σας.</p>
Εδώ ορίστηκε ένα παράγραφος. Μέσα σε αυτόν τον παράγραφο υπάρχει μια εικόνα και κείμενο.
Μια ματιά στο αποτέλεσμα δείχνει ότι η εικόνα είναι μέσα στη ροή του κειμένου.
Τώρα έρχεται σε παιχνίδι η ιδιότητα float.
img { float: left;}
Επίσης, εδώ ένα ακόμη ματιά στο αποτέλεσμα.
Εδώ λοιπόν η εικόνα έχει float. Το κείμενο ρέει γύρω από την εικόνα.
Στην ιδιότητα float μπορείτε να αναθέσετε τις τιμές left και right για να αφήσετε το στοιχείο να "κινείται" προς τα αριστερά (float: left) ή δεξιά (float: right).
Μπορείτε επίσης να εφαρμόσετε αμέσως το float: right στην εικόνα.
Σε αυτήν την περίπτωση συμβαίνουν τρία πράγματα:
• Η γραφική παρουσίαση απομακρύνεται από την κανονική ροή.
• Μετακινείται μέσα στο στοιχείο p πολύ ψηλά.
• Εμφανίζεται όσο το δυνατόν πιο δεξιά.
Μια ματιά στα μέχρι τώρα αποτελέσματα αποκαλύπτει ότι ακόμη δεν φαίνεται πραγματικά ωραίο. Πράγματι, λείπουν τα κενά μεταξύ της εικόνας και του περιέχοντος το κείμενο. Προσαρμόστε τη σύνταξη ως εξής:
img {
float: left;
margin-right: 20px;
}
Στην εικόνα ανατεθείκε ένα δεξί περιθώριο 20 pixel. Αυτό παράγει την ακόλουθη όψη:
Εξερευνήστε λίγο με τα περιθώρια.
Ολοκλήρωση Float
Πάλι πίσω στο παράδειγμα της εικόνας. Επεκτείνω τη σύνταξη με έναν επιπλέον παράγραφο κειμένου.
<p><img src="bild.jpg" />Σε αυτό το σετ υπάρχουν 12 δικές σχήματα που μπορείτε να χρησιμοποιήσετε στα φυλλάδιά σας, φόντα κλπ. Τα σχήματα διακρίνονται σε 18, 21 και 24 λωρίδες καθώς και διαφορετικές πλάτες ακτινών. Αυτά τα προεπιλεγμένα είναι μια καλή βάση για όμορφα εφέ στις διατάξεις και τις εικόνες σας.</p> <p>Σε αυτό το σετ υπάρχουν 12 δικές σχήματα που μπορείτε να χρησιμοποιήσετε στα φυλλάδιά σας, φόντα κλπ. Τα σχήματα διακρίνονται σε 18, 21 και 24 λωρίδες καθώς και διαφορετικές πλάτες ακτινών. Αυτά τα προεπιλεγμένα είναι μια καλή βάση για όμορφα εφέ στις διατάξεις και τις εικόνες σας.</p>
Το αποτέλεσμα είναι το εξής:
Πράγματι, όχι μόνο ο πρώτος παράγραφος περικυκλώνει τη γραφική παρουσίαση. Το ίδιο ισχύει και για το δεύτερο απόσπασμα κειμένου. Αυτό οφείλεται απλά και μόνο στο ότι η γραφική παρουσίαση ξεπερνά τον πρώτο παράγραφο προς τα κάτω. Για καλύτερη κατανόηση, ας εφαρμόσουμε απλά ένα χρώμα φόντου στον παράγραφο όπου περιέχεται η γραφική παρουσίαση.
Κατά την προβολή του αποτελέσματος, γίνεται ξεκάθαρο ότι πράγματι, η γραφική παρουσίαση υπερβαίνει τον πρώτο παράγραφο προς τα κάτω. Αυτό φυσικά δεν είναι πάντα επιθυμητό. Σε αυτό το σημείο γίνεται ενδιαφέρουσα η ιδιότητα clear. Γιατί με αυτή μπορούμε να τερματίσουμε το Float. Το clear επιβάλλει σε ένα επόμενο στοιχείο να αρχίζει πραγματικά κάτω από ένα στοιχείο που έχει float, και όχι δίπλα του. Η ιδιότητα clear δέχεται τα ακόλουθα στοιχεία:
• left – τερματίζει το float: left
• right – τερματίζει το float: right
• both – τερματίζει τόσο το float: right όσο και το float: left
Στο παρακάτω παράδειγμα, αναθέτω στον δεύτερο παράγραφο το clear: left για να τερματίσω το Float.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
img {
float: left;
margin-right: 20px;
}
</style>
</head>
<body>
<p style="background-color:#CCFF66;"><img src="bild.jpg" />Σε αυτό το σετ υπάρχουν 12 δικές σχήματα που μπορείτε να χρησιμοποιήσετε στα φυλλάδιά σας, φόντα κλπ. Τα σχήματα διακρίνονται σε 18, 21 και 24 λωρίδες καθώς και διαφορετικές πλάτες ακτινών. Αυτά τα προεπιλεγμένα είναι μια καλή βάση για όμορφα εφέ στις διατάξεις και τις εικόνες σας.</p>
<p style="clear:left;">Σε αυτό το σετ υπάρχουν 12 δικές σχήματα που μπορείτε να χρησιμοποιήσετε στα φυλλάδιά σας, φόντα κλπ.
Με τη συντακτική παράδειγμα που δείχνει, το δεύτερο παράγραφο τώρα πράγματι εμφανίζεται κάτω από την εικόνα.
Στις περισσότερες περιπτώσεις, αντί για clear: left ή clear: right, μπορείτε απλά να χρησιμοποιήσετε το clear: both. Γι' αυτό είναι συνίσταται να δημιουργήσετε ένα αντίστοιχο κλάση στο stylesheet σας, την οποία μπορείτε να καλέσετε όποτε χρειάζεται.
.clearing {
clear: both;
}
Μπορείτε να χρησιμοποιήσετε αυτή την κλάση κάθε φορά που θέλετε να τερματιστεί το floating ενός στοιχείου.
<p class="clearing">Περιεχόμενο ...</p>
Για τι είναι καλό το floating
Φυσικά, το floating χρησιμοποιείται όχι μόνο για τη ροή του κειμένου σε σχέση με τις εικόνες. Πράγματι, αποτελεί το βασικό concept των ιστοσελίδων βασισμένων σε CSS. Χάρη στο floating, μπορούν να υλοποιηθούν πολυσταθή layouts με ευκολία. Δείτε το παρακάτω παράδειγμα:
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
#navi {
float:left;
width:12em;
background-color:#99FFFF;
}
#inhalt {
margin-left: 14em;
background-color: #FF3333;
}
</style>
</head>
<body>
<div id="navi">
<ul>
<li>Αρχική σελίδα</li>
<li>Επικοινωνία</li>
<li>Υπηρεσία</li>
</ul>
</div>
<div id="inhalt">
Εδώ βρίσκεται το περιεχόμενο της ιστοσελίδας.
</div>
</body>
</html>
Εδώ δημιουργείται ένα δισταθμικό layout. Το ιδιαίτερο είναι πως οι στήλες βρίσκονται δίπλα-δίπλα.
Και ακριβώς αυτή η δίπλα-δίπλα τοποθέτηση επιτυγχάνεται μέσω του floating concept. Λεπτομερείς πληροφορίες για τη δημιουργία ιστοσελίδων με βάση το floating θα ακολουθήσουν στη συνέχεια αυτής της σειράς.
