Previous
Next

Επίπλευση (float) και Καθαρισμός (clear)

Έτσι, έχουμε τον γνωστό μας κώδικα:

Κώδικας:

<!DOCTYPE html>
<html lang="en">
  <head>
     <style>
       .cl1 {background:yellow; font-size:1em; font-family:courier; width:20%}
        .cl2 {background:lightblue; font-size:1em; font-family:courier; width:20% }
     </style> 
   </head>
   <body>
     <div class="cl1">
        This is a div with a yellow background 
     </div>
     <div class="cl2">
        This is a div with a blue background
     </div>
     <ol >
        <li>First item</li>
        <li>Second item</li>
     </ol>
   </body>
</html>

και την εμφάνισή του:

No float

Θέλουμε να επιτύχουμε την έξοδο που εμφανίζεται στην επόμενη εικόνα. Πρέπει να μετακινήσουμε το κίτρινο div εντελώς αριστερά και να μετακινηθεί- επιπλεύσει το μπλε div δίπλα σε αυτό.

The output

Για να το επιτύχουμε, θα χρησιμοποιήσουμε την ιδιότητα float που καθορίζει τον τρόπο με τον οποίο θα πρέπει να επιπλεύσει ένα στοιχείο.

Στον κώδικα μας, δημιουργούμε μια τάξη και την ονομάζουμε .leftfloat.

.floatLeft{float:left}
και την εφαρμόζουμε και στα δύο divs
<div class="cl1 floatLeft">
<div class="cl2 floatLeft">
Η έξοδος είναι 
Just float
Βλέπουμε ότι η λίστα έχει επίσης μετεγκατασταθεί. Δεν το θέλουμε. Για να διορθώσουμε αυτό θα χρησιμοποιήσουμε μια άλλη ιδιότητα CSS που ονομάζεται "clear".
Αυτό καθορίζει ποια στοιχεία μπορούν να επιπλέουν δίπλα στο στοιχείο εκκαθάρισης και από ποια πλευρά.
Έτσι, πηγαίνουμε στον κώδικα μας και δημιουργούμε μια τάξη με όνομα .clearLeft 
.clearLeft{clear: left}
και την εφαρμόζουμε στη λίστα:
<ol class="clearLeft">
We have achieved our desirable outcome.
Προκειμένου να συνεχίσουμε τη διαδικασία με περισσότερα στοιχεία html, πρέπει να εφαρμόσουμε τις κλάσεις.floatLeft και.clearLeft στη λίστα μας.
<ol class="floatLeft clearLeft">

Τελικός κώδικας:

<!DOCTYPE html>
<html lang="en">
  <head>
     <style>
       .floatLeft{float:left}
       .clearLeft{clear:left}
       .cl1 {background:yellow; font-size:1em; font-family:courier; width:20%}
       .cl2 {background:lightblue; font-size:1em; font-family:courier; width:20% }
     </style> 
  </head>
  <body>
     <div class="cl1 floatLeft">
         This is a div with a yellow background 
     </div>
     <div class="cl2 floatLeft">
         This is a div with a blue background
     </div>
     <ol class="floatLeft clearLeft" >
         <li>First item</li>
         <li>Second item</li>
     </ol>
  </body>
</html>
Περισσότερες πληροφορίες: https://www.w3schools.com/css/css_float.asp
Previous
Next