CSS에서 float 속성과 여러 블록

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

Результат: