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

Source Code: (back to article)

<!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>