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:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
some long text
</div>
.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:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
some long text
</div>
.parent {
border: 1px solid red;
text-align: justify;
}
.child {
float: right;
width: 200px;
height: 100px;
border: 1px solid green;
}
:
