De eigenschap float en meerdere blokken in CSS

Stel dat er nu niet één div-kind is in de HTML-code, maar twee, en beide hebben float met de waarde left. Laten we kijken wat er gebeurt:

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;
}

Результат:

Dus, zoals we kunnen zien, staan de twee kindblokken op een rij, waarbij het eerste blok in de HTML-code links wordt geplaatst.

Laten we nu in plaats van de waarde left de waarde right schrijven. In dit geval zullen de blokken rechts zweven, waarbij de volgorde wordt omgekeerd vergeleken met de volgorde in de HTML-code:

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;
}

Результат: