Διάταξη CSS - σαφής και σαφής επιδιόρθωση

Πίνακας περιεχομένων

    Εμφάνιση πίνακα περιεχομένων

Η ιδιότητα CSS διαγράφει

Όταν χρησιμοποιούμε την ιδιότητα float και θέλουμε το επόμενο στοιχείο παρακάτω (όχι δεξιά ή αριστερά), θα πρέπει να χρησιμοποιήσουμε το διαγραφή ιδιοκτησία.

Η ιδιότητα clear καθορίζει τι θα πρέπει να συμβεί με το στοιχείο που βρίσκεται δίπλα σε ένα αιωρούμενο στοιχείο.

Η ιδιότητα διαγραφή μπορεί να έχει ένα από τα οι ακόλουθες τιμές:

none

- Το στοιχείο δεν πιέζεται κάτω από αριστερά ή δεξιά αιωρούμενα στοιχεία. Αυτό είναι προεπιλογή

left

- Το στοιχείο πιέζεται κάτω από τα αριστερά αιωρούμενα στοιχεία

right

- Το στοιχείο πιέζεται κάτω από τα δεξιά αιωρούμενα στοιχεία

both

- Το στοιχείο πιέζεται κάτω από τα αριστερά και τα δεξιά αιωρούμενα στοιχεία

inherit

- Το στοιχείο κληρονομεί τη σαφή τιμή από τον γονέα του

Κατά την εκκαθάριση float, θα πρέπει να ταιριάξετε το clear με το float: Εάν ένα στοιχείο επιπλέει προς τα αριστερά, τότε θα πρέπει να καθαρίσετε προς τα αριστερά. Το αιωρούμενο στοιχείο σας θα συνεχίσει να επιπλέει, αλλά το διαγραμμένο στοιχείο θα εμφανιστεί κάτω από αυτό στον ιστό σελίδα.

Παράδειγμα

Αυτό το παράδειγμα διαγράφει το float προς τα αριστερά. Εδώ, σημαίνει ότι το Το στοιχείο πιέζεται κάτω από το αριστερό αιωρούμενο στοιχείο :

div1 {
  float: left;
}
div2 {
  clear: left;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
  float: left;
  padding: 10px;
  border: 3px solid #73AD21;
}

.div2 {
  padding: 10px;
  border: 3px solid red;
}

.div3 {
  float: left;
  padding: 10px;  
  border: 3px solid #73AD21;
}

.div4 {
  padding: 10px;
  border: 3px solid red;
  clear: left;
}
</style>
</head>
<body>

<h2>Without clear</h2>
<div class="div1">div1</div>
<div class="div2">div2 - Notice that div2 is after div1 in the HTML code. However, since div1 floats to the left, the text in div2 flows around div1.</div>
<br><br>

<h2>With clear</h2>
<div class="div3">div3</div>
<div class="div4">div4 - Here, clear: left; moves div4 down below the floating div3. The value "left" clears elements floated to the left. You can also clear "right" and "both".</div>

</body>
</html>

Το clearfix Hack

Εάν ένα αιωρούμενο στοιχείο είναι ψηλότερο από το στοιχείο που περιέχει, αυτό θα «ξεχειλίσει» έξω από το δοχείο του. Μπορούμε στη συνέχεια να προσθέσουμε ένα clearfix hack σε λύσε αυτό το πρόβλημα:

Without Clearfix

With Clearfix

Παράδειγμα

.clearfix {
  overflow: auto;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 3px solid #4CAF50;
  padding: 5px;
}

.img1 {
  float: right;
}

.img2 {
  float: right;
}

.clearfix {
  overflow: auto;
}
</style>
</head>
<body>

<h2>Without Clearfix</h2>

<p>This image is floated to the right. It is also taller than the element containing it, so it overflows outside of its container:</p>

<div>
  <img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

<h2 style="clear:right">With Clearfix</h2>
<p>We can fix this by adding a clearfix class with overflow: auto; to the containing element:</p>

<div class="clearfix">
  <img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

</body>
</html>

Η επιδιόρθωση overflow: auto λειτουργεί καλά εφόσον μπορείτε να διατηρήσετε τον έλεγχο των περιθωρίων και των συμπληρωμάτων σας (αλλιώς μπορεί να δει γραμμές κύλισης). ο Ωστόσο, το νέο, μοντέρνο χάκ καθαρισμού επιδιόρθωσης είναι πιο ασφαλές στη χρήση και ο ακόλουθος κώδικας χρησιμοποιείται για τις περισσότερες ιστοσελίδες:

Παράδειγμα

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 3px solid #4CAF50;
  padding: 5px;
}

.img1 {
  float: right;
}

.img2 {
  float: right;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
</style>
</head>
<body>

<h2>Without Clearfix</h2>

<p>This image is floated to the right. It is also taller than the element containing it, so it overflows outside of its container:</p>

<div>
  <img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

<h2 style="clear:right">With New Modern Clearfix</h2>
<p>Add the clearfix hack to the containing element, to fix this problem:</p>

<div class="clearfix">
  <img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

</body>
</html>

Θα μάθετε περισσότερα για το ψευδοστοιχείο ::after σε επόμενο κεφάλαιο.