Wie kann man Gleitkommazahlen löschen? Was bedeutet Clearfix?

Ein Clearfix ist eine Möglichkeit für ein Element, seine Elemente automatisch zu löschen oder zu fixieren, so dass kein zusätzliches Markup hinzugefügt werden muss. Im Float-Layout wird es im Allgemeinen dort verwendet, wo Elemente schwebend angeordnet sind, um horizontal zu gleiten.

Es ist ein CSS-Hack, der einen Fehler behebt, der auftritt, wenn zwei gleitende Elemente nebeneinander gestapelt werden. Alles, was Sie versuchen können, ist, eine Seitenleiste links neben Ihrem Hauptinhaltsblock zu positionieren, aber das Ergebnis wären zwei Elemente, die sich überlappen und zusammenfallen. Um die Sache noch komplizierter zu machen, ist der Fehler in allen Browsern inkonsistent. Der Clearfix wurde erfunden, um all diese Probleme zu lösen.

Hier werden wir 3 Clearfix-Hacks besprechen:

1. Verwenden Sie overflow: auto;

Wenn ein Element größer als sein enthaltenes Element ist und es geflutet wird, läuft es außerhalb seines Containers über.

So können wir die Eigenschaft overflow mit dem Wert "auto" value (overflow: auto) zum enthaltenden Element hinzufügen, um dieses Problem zu beheben.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      div {
      border: 2px solid #1c87c9;
      padding: 8px;
      }
      .noclearfix {
      float: right;
      }
      .clearfix {
      overflow: auto;
      }
      p{
      clear:right;
      }
      .img {
      float: right;
      }
    </style>
  </head>
  <body>
    <div>
      <img class="noclearfix" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185">
      Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er....
    </div>
    <p>Overflow: auto hinzufügen</p>
    <div class="clearfix">
      <img class="img" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185">
      Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er....
    </div>
  </body>
</html>

2. Verwenden Sie clear: both; content:""; und display: table; with ::after

Overflow:auto Clearfix funktioniert gut, solange Sie Ihre Ränder und Polster verwalten können (sonst sind Scrollbalken zu sehen). Ein neuer, moderner Clearfix-Hack ist jedoch sicherer in der Verwendung und die meisten Webseiten verwenden den folgenden Code:

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

Die Eigenschaft clear ist auf "both" eingestellt, was bedeutet, dass die schwebenden Elemente sowohl auf der rechten als auch auf der linken Seite nicht erlaubt sind. Die Enschaft display wird auf "table" eingestellt, damit sich das Element wie ein HTML-Element <table> verhält. Und der content bleibt leer.

Die ursprüngliche beliebte Version ist display: block für IE. Dann gab es eine etwas sauberere Version, für IE-Mac, die nicht verwendet wird.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      div {
      border: 2px solid #1c87c9;
      padding: 8px;
      }
      .noclearfix {
      float: right;
      }
      .clearfix::after {
      content: "";
      clear: both;
      display: table;
      }
      .img {
      float: right;
      }
      p{
      clear:right
      }
    </style>
  </head>
  <body>
    <div>
      <img class="noclearfix" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185">
      Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er....
    </div>
    <p>Fügen Sie ein neues Clearfix-Hack hinzu.</p>
    <div class="clearfix">
      <img class="img" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185">
      Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er....
    </div>
  </body>
</html>

3. Ende von Clearfix: Verwenden Sie display: flow-root

Der Clearfix verliert etwas an Relevanz. CSS Grid und Flexbox üllen die Lücken für ein erweitertes Layout im Web. Es gibt eine neue Möglichkeit, den Clearfix-Hack durch eine einzige Zeile Code zu ersetzen, indem man eine neue Modusregel display, die als flow-root bekannt ist, verwendet. Die Spezifikation ansehen.

Verwenden Sie Flow-Root auf diese Weise:

.clearfix {
display: flow-root;
}

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      div {
      border: 2px solid #8ebf42;
      padding: 8px;
      }
      .noclearfix {
      float: right;
      }
      .clearfix {
      display: flow-root;
      }
      .img {
      float: right;
      }
      p{
      clear:right;
      }
    </style>
  </head>
  <body>
    <div>
      <img class="noclearfix" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185">
      Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er....
    </div>
    <p>Display: flow-root hinzufügen.</p>
    <div class="clearfix">
      <img class="img" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185">
       Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er....
    </div>
  </body>
</html>

Ein weiteres Beispiel, wo ein Clearfix-Hack und display: flow-root werden zum Vergleich verwendet.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
      border: 1px solid #3bc9db;
      border-radius: 5px;
      background-color: #e3fafc;
      width: 400px;
      padding: 5px;
      }
      .container2::after {
      content: "";
      display: block;
      clear: both;
      }
      .container3 {
      display: flow-root;
      }
      .item {
      height: 100px;
      width: 100px;
      background-color: #1c87c9;
      border: 1px solid #eee;
      border-radius: 5px;
      float: left;
      }
      .clear {
      clear: both;
      }
      .wrapper {
      max-width: 600px;
      margin: 40px auto;
      }
    </style>
  </head>
  <body>
    <div>
    <div class="wrapper">
      <h2>Standardverhalten</h2>
      <p>Dieses Element ist ein Wrapper, der einen nach links gleitenden Block enthält.</p>
      <div class="container container1">
        <div class="item"></div>
        1. Beispiel
      </div>
      <p>Der Rand des enthaltenden Blocks umschließt nur den Text, wenn das gleitende Element aus dem Fluss genommen wird.</p>
      <p>er Inhalt nach der Box wird ebenfalls nach oben steigen und sich um den Float wickeln, es sei denn, wir setzen ihn auf clear.</p>
      <h2 class="clear">Clearfix-Hack</h2>
      <p>In diesem nächsten Element verwenden wir einen Clearfix-Hack, um den Wrapper zu veranlassen, das schwebende Element zu löschen.</p>
      <div class="container container2">
        <div class="item"></div>
        2. Beispiel
      </div>
      <h2>Display: flow-root verwenden</h2>
      <p>CSS hat jetzt eine Möglichkeit, Fließkommazahlen zu löschen. Wir stellen den Wert von display auf flow-root ein und unsere schwebende Box wird gelöscht.</p>
      <div class="container container3">
        <div class="item"></div>
        3. Beispiel
      </div>
    </div>
  </body>
</html>

Wir erreichen eine Zeit, wenn Clearfix nicht mehr benötigt wird. Es gäbe wenig echte Erklärung, um überhaupt etwas darüber zu erfahren, wenn Sie gerade erst im Web anfangen. Das ist eine schöne Sache! Die Ironie ist, dass wir heute nicht mehr die Werkzeuge hätten, um uns nie wieder auf sie verlassen zu müssen, ohne die Hingabe und Forschung der Entwickler, die sich viele Jahre lang auf das Clearfix gehackt haben.