1. Thuộc tính float trong CSS

Thuộc tính float được sử dụng để định vị và định dạng nội dung. Một cách sử dụng đơn giản nhất dể sử dụng thuộc tính float là dùng để bọc văn bản xung quanh hình ảnh

Thuộc tính float có thể có các giá trị sau:

• left – Phần tử ở bên trái vùng chứa của nó
• right – Phần tử ở bên phải vùng chứa của nó
• none (mặc định)- Phần tử sẽ được hiển thị ngay tại nơi nó xuất hiện trong văn bản
• inherit – Phần tử kế thừa giá trị float của phần tử mẹ của nó

Ví dụ:

1.1 float: right;

1.2 float: left;

1.3 float: none;

Thông thường các phần tử div sẽ được hiển thị xếp chồng lên nhau. Tuy nhiên, nếu chúng ta sử dụng , float: left; chúng ta có thể khiến cho các phần tử xếp cạnh nhau

Ví dụ:

2. Thuộc tính clear trong CSS

Thuộc tính clear trong CSS được sử dụng để ngăn các phần tử trôi nổi trong tài liệu làm ảnh hưởng đến các phần tử bên cạnh nó

Thuộc tính clear có thể có các thuộc tính sau:

• none (mặc định) – Phần tử không bị đẩy xuống dưới phần tử nổi bên trái hoặc bên phải
• left – Phần tử được đẩy xuống bên dưới các phần tử nổi bên trái
• right – Phần tử được đẩy xuống bên dưới phần tử nổi bên phải
• both – Phần tử được đẩy xuống bên dưới cả phần tử nổi bên trái và bên phải
• inherit – Phần tử kế thừa giá trị clear từ phần tử mẹ của nó

Ví dụ:

Nếu một phần tử float cao hơn phần tử chứa, nó sẽ “tràn” ra bên ngoài vùng chứa của nó. Để giải quết vấn đề này ta sử dụng cách thêm thuộc tính overflow: auto; vào phần tử chứa nó

Ví dụ: