Bài 27: Cách sử dụng Float trong css

Cách sử dụng Float trong css

Float là một thuộc tính trong CSS được sử dụng để định vị phần tử dọc theo bên trái hoặc bên phải của phần tử cha của nó. Khi sử dụng float, phần tử sẽ được di chuyển ra khỏi vị trí bình thường của nó và dịch chuyển theo hướng được chỉ định bởi giá trị của thuộc tính float.

Có hai giá trị chính được sử dụng cho thuộc tính float:

1. left: Phần tử sẽ được đặt ở bên trái của phần tử cha của nó và các phần tử khác sẽ được đặt bên phải của nó.

2. right: Phần tử sẽ được đặt ở bên phải của phần tử cha của nó và các phần tử khác sẽ được đặt bên trái của nó.

Ví dụ, để đặt một phần tử div ở bên trái của phần tử cha của nó, bạn có thể sử dụng thuộc tính float với giá trị là "left":

div {
  float: left;
}

Tương tự, để đặt một phần tử div ở bên phải của phần tử cha của nó, bạn có thể sử dụng thuộc tính float với giá trị là "right":

div {
  float: right;
}

Lưu ý rằng khi sử dụng float, phần tử cha của nó sẽ không còn giữ lại độ cao ban đầu của nó nữa, và các phần tử khác có thể bị che khuất bởi phần tử được đặt float. Để khắc phục vấn đề này, bạn có thể sử dụng thuộc tính clear để xác định xem phần tử nào sẽ được đặt sang bên dưới phần tử được đặt float.