Propriété float et plusieurs blocs en CSS

Supposons maintenant qu'il y ait côte à côte dans le code HTML non pas un seul div enfant, mais deux, et que les deux aient la propriété float avec la valeur left. Regardons ce qui se passe :

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

Результат:

Ainsi, comme nous pouvons le voir, les deux blocs enfants se sont alignés sur une ligne, le premier bloc dans le code HTML étant positionné à gauche.

Maintenant, au lieu de la valeur left, utilisons la valeur right. Dans ce cas, les blocs flotteront à droite, et l'ordre sera inversé par rapport à l'ordre dans le code 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;
}

Результат: