Thuộc tính float và nhiều khối trong CSS

Bây giờ giả sử trong mã HTML có không phải một phần tử div con, mà là hai phần tử và cả hai đều được thiết lập thuộc tính float với giá trị left. Hãy xem điều gì sẽ xảy ra:

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

Результат:

Vậy, như chúng ta thấy, hai khối con đã xếp thành hàng ngang, trong đó khối xuất hiện đầu tiên trong mã HTML sẽ được định vị bên trái.

Bây giờ hãy thay giá trị left bằng giá trị right. Trong trường hợp này, các khối sẽ float sang phải, và thứ tự của chúng sẽ đảo ngược so với thứ tự trong mã 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;
}

Результат: