float & clear

.image {
  float: left;
  width: 100px;
  margin: 0 12px 8px 0; /* Abstand zum Text */
}

/* Text fließt automatisch um das Bild herum */

<div class="demo">
<div class="article">
  <div class="article-img">Bild</div>
  <p><strong>Textumfluss mit float: left.</strong> Der Text fließt rechts neben dem Bild weiter. Wenn der Text länger ist als das Bild, läuft er automatisch unter dem Bild weiter. Das ist genau das Verhalten, das man von Zeitungslayouts kennt.</p>
  <p>Dieser zweite Absatz fließt ebenfalls um das Bild, sofern er noch neben dem Bild beginnt. Sobald genug Text vorhanden ist, füllt er die gesamte Breite unterhalb des Bildes aus.</p>
</div>
</div>

.image {
  float: right;
  width: 100px;
  margin: 0 0 8px 12px; /* Abstand zum Text (links) */
}

<div class="demo">
<div class="article-right">
  <div class="article-img-right">Bild</div>
  <p><strong>Textumfluss mit float: right.</strong> Hier fließt der Text links neben dem Bild. Das Bild wird an den rechten Rand des Containers geschoben. Der restliche Inhalt umfließt es von links.</p>
  <p>Wie bei float: left läuft der Text automatisch unter dem Bild weiter, sobald er den unteren Rand des Bildes erreicht hat.</p>
</div>
</div>

.left  { float: left; }
.right { float: right; }

.below-floats {
  clear: both; /* Beginnt unter allen Floats */
}

<div class="demo">
<div class="float-demo">
  <div class="float-left">float: left</div>
  <div class="float-right">float: right</div>
  <p class="clear-text">Dieser Text fließt zwischen den beiden Floats.</p>
  <p class="cleared">Dieser Absatz hat clear: both und beginnt unterhalb beider Floats.</p>
</div>
</div>

/* Problem: Container kollabiert */
.broken {
  border: 2px solid red;
  /* Float-Kind ragt heraus */
}

/* Lösung: flow-root erzeugt neuen Formatting Context */
.fixed {
  display: flow-root;
  border: 2px solid green;
  /* Float-Kind wird korrekt umschlossen */
}

/* Veralteter clearfix-Hack (nicht mehr nötig):
.clearfix::after {
  content: "";
  display: block;
  clear: both;
} */

<div class="demo">
<div class="compare-row">
  <div class="compare-box">
    <div class="label" style="color: #dc2626;">Ohne flow-root</div>
    <div class="no-fix">
      <div class="float-el">Float</div>
      <span class="content-text">Container kollabiert.</span>
    </div>
  </div>
  <div class="compare-box">
    <div class="label" style="color: #059669;">Mit flow-root</div>
    <div class="with-fix">
      <div class="float-el">Float</div>
      <span class="content-text">Container umschließt das Float.</span>
    </div>
  </div>
</div>
</div>