Die CSS-Eigenschaft float und mehrere Blöcke

Nehmen wir nun an, dass im HTML-Code nicht ein div-Nachkomme, sondern zwei nebeneinander stehen und beiden float mit dem Wert left zugewiesen wurde. Sehen wir uns an, was passiert:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  some long text
</div>

css.parent {
  border: 1px solid red;
  text-align: justify;
}
.child {
  float: left;
  width: 200px;
  height: 100px;
  border: 1px solid green;
}

Результат:

Wie wir sehen können, haben sich die zwei Block-Nachkommen in einer Reihe angeordnet, wobei der erste Block im HTML-Code links positioniert wird.

Schreiben wir nun anstelle des Wertes left den Wert right. In diesem Fall werden die Blöcke rechts fließen, wobei sich ihre Reihenfolge im Vergleich zur Reihenfolge im HTML-Code umkehrt:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  some long text
</div>

css.parent {
  border: 1px solid red;
  text-align: justify;
}
.child {
  float: right;
  width: 200px;
  height: 100px;
  border: 1px solid green;
}

Результат: