Η ιδιότητα float και το γονέας χωρίς κείμενο στο CSS
Ας υποθέσουμε τώρα ότι έχουμε ένα div με κλάση parent
χωρίς κείμενο, αλλά με δύο παιδικά blocks
με κλάση child:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
</div>
.parent {
width: 500px;
border: 1px solid red;
text-align: justify;
}
.child {
width: 200px;
height: 100px;
border: 1px solid green;
}
:
Ας κάνουμε τα παιδικά blocks να επιπλέουν προς τα αριστερά και ας δούμε τι θα συμβεί:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
</div>
.parent {
width: 500px;
border: 1px solid red;
text-align: justify;
}
.child {
float: left;
width: 200px;
height: 100px;
border: 1px solid green;
}
:
Όπως βλέπουμε, τα παιδικά blocks μπήκαν στη σειρά, ωστόσο, το ύψος του γονέα έχει εξαφανιστεί και τα blocks μας βγήκαν έξω από αυτόν προς τα κάτω.
Αυτή η συμπεριφορά είναι ήδη γνωστή σε εμάς. Για την επίλυση του προβλήματος θα πρέπει να χρησιμοποιήσετε το clearfix. Ας το κάνουμε αυτό:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="clearfix"></div>
</div>
.parent {
width: 500px;
border: 1px solid red;
text-align: justify;
}
.child {
float: left;
width: 200px;
height: 100px;
border: 1px solid green;
}
.clearfix {
clear: both;
}
:
