floatfloat:
left: Dịch chuyển phần tử sang bên trái của vùng chứa.right: Dịch chuyển phần tử sang bên phải của vùng chứa.none: Không áp dụng thuộc tính float (đây là giá trị mặc định).inherit: Kế thừa giá trị float từ phần tử cha..float-left {
float: left;
}
.float-right {
float: right;
}<div class="float-left">Phần tử bên trái</div>
<div class="float-right">Phần tử bên phải</div>floatKhi một phần tử bị float, nó sẽ không còn nằm trong luồng tài liệu thông thường. Điều này có nghĩa là các phần tử khác sẽ không xem nó là phần tử cha và có thể chồng lên nó.
<div class="container">
<div class="float-left">Phần tử bên trái</div>
<div>Phần tử không bị float</div>
</div>Trong ví dụ này, phần tử không bị float sẽ di chuyển lên trên phần tử float.
Khi sử dụng float, có thể xảy ra hiện tượng “tràn ngược” (clearfix), nơi mà các phần tử cha không nhận diện chiều cao của các phần tử con bị float. Để giải quyết vấn đề này, bạn có thể sử dụng thuộc tính clear.
clearclear:
left: Ngăn không cho phần tử đứng bên trái phần tử floated.right: Ngăn không cho phần tử đứng bên phải phần tử floated.both: Ngăn không cho phần tử đứng bên trái hoặc bên phải phần tử floated.inherit: Kế thừa giá trị clear từ phần tử cha.Ví dụ Clearfix:
.clearfix::after {
content: "";
display: table;
clear: both;
}<div class="container clearfix">
<div class="float-left">Phần tử bên trái</div>
<div class="float-right">Phần tử bên phải</div>
</div>floatfloat có thể gây ra các vấn đề về bố cục trên các thiết bị khác nhau. Hãy đảm bảo kiểm tra bố cục trên các kích thước màn hình khác nhau.float ngày càng giảm đi. Những phương pháp này cung cấp cách bố trí linh hoạt hơn và dễ quản lý hơn.
