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ụ:
