Egenskapen float og flere blokker i CSS

La det nå være ikke én div-barneelement i HTML-koden, men to, og begge har float satt til verdien left. La oss se hva som skjer:

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

Результат:

Så, som vi kan se, har de to blokk-barneelementene stiltt seg på rad, hvor den første blokken i HTML-koden vil være plassert til venstre.

La oss nå i stedet for verdien left skrive verdien right. I dette tilfellet vil blokkene flyte til høyre, hvor rekkefølgen deres vil være motsatt sammenlignet med rekkefølgen i HTML-koden:

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

Результат: