Свойство float и няколко блока в CSS

Нека сега в HTML кода един до друг да има не един div-наследник, а два и на двата е зададен float със стойност left. Нека да видим какво ще се случи:

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

Результат:

И така, както виждаме, двата блока-наследника се подредиха на ред, като първият блок в HTML кода ще бъде разположен отляво.

Нека сега вместо стойността left напишем стойност right. В този случай блоковете ще плават отдясно, като редът им ще се обърне на обратен в сравнение с реда в HTML кода:

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

Результат: