Clear με css

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
dpa
Δημοσιεύσεις: 631
Εγγραφή: 29 Μαρ 2008 13:55

Clear με css

Δημοσίευση από dpa » 09 Οκτ 2010 13:21

Παιδιά τι κάνει αυτό ??

και πότε το χρησιμοποιούμε

<div class="clear"></div>

Άβαταρ μέλους
Khronos
Δημοσιεύσεις: 754
Εγγραφή: 11 Δεκ 2006 14:43
Τοποθεσία: Ηράκλειο

Clear με css

Δημοσίευση από Khronos » 09 Οκτ 2010 13:59

Εξαρτάται απο τι κώδικα έχει η κλάση clear.

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Clear με css

Δημοσίευση από dimsis » 09 Οκτ 2010 16:54

Καθαρίζει τα float συνήθως ... και στο css θα το βρεις πιθανότατα σαν .clear { clear: both }

Πες ότι έχεις ένα div που κάνει float:left και από κάτω έχεις άλλο ένα που θέλεις όμως να μην ξεκινήσει δεξιά από το προηγούμενο που έχει float:left, βάζεις το div που αναφέρεις και έτσι πάει από κάτω μόνο του.

π.χ. untested

<style>
.content { width:800px; float:left }
.sidebar { width:270px; float:left }
.clear { clear:both }
</style>

<div class="content">mpla mpla</div>
<!-- δοκίμασε εδώ χωρίς <div class="clear"></div> και έπειτα με αυτό -->
<div class="sidebar ">Menu klp</div>

Άβαταρ μέλους
Khronos
Δημοσιεύσεις: 754
Εγγραφή: 11 Δεκ 2006 14:43
Τοποθεσία: Ηράκλειο

Clear με css

Δημοσίευση από Khronos » 09 Οκτ 2010 17:26

Μπορεί όμως να εννοεί και κάτι τέτοιο που το χρησιμοποιούμε έτσι ώστε το container div να περικλείει τα floated divs:

Κώδικας: Επιλογή όλων

<div id="container" class="clear">
    <div class="left">bla bla</div>
    <div class="right">bla bla</div>
</div>

.clear &#123; min-height&#58; 0px; &#125;
* html .clear &#123; height&#58; 1%!important; &#125;

.clear&#58;after &#123;
   content&#58; ".";
   display&#58; block;
   height&#58; 0px;
   font-size&#58;0px;
   clear&#58; both;
   visibility&#58;hidden;
   overflow&#58; hidden;
&#125;

.left &#123; float&#58; left; &#125;
.right &#123; float&#58; right; &#125;

#container &#123; border&#58; 1px solid #FF0000; &#125;

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Clear με css

Δημοσίευση από dimsis » 09 Οκτ 2010 17:30

Αυτό που λες το συναντάμε συνήθως με class name "clearfix"

Άβαταρ μέλους
Sermac
Δημοσιεύσεις: 363
Εγγραφή: 26 Σεπ 2007 21:08

Clear με css

Δημοσίευση από Sermac » 09 Νοέμ 2010 11:04

dpa έγραψε:<div class="clear"></div>
Μια παρατήρηση μόνο. Για να έχετε έγκυρο validation, πρέπει να το γράφετε έτσι:

Κώδικας: Επιλογή όλων

<div class="clear">&nbsp;</div>
ή έτσι:

Κώδικας: Επιλογή όλων

<div class="clear"><!-- --></div>

Κι επίσης, στο .clear {} καλό είναι να βάζετε κι ένα height:0;.
Εικόνα

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες