Trong bài viết này, CNET sẽ cùng các bạn tìm hiểu về 2 thuộc tính đóng vai trò quan trọng trong việc định dạng và sắp xếp các phần tử trên trang web. Thuộc tính "float" và "clear" là hai khái niệm quan trọng khi bạn muốn kiểm soát cách các phần tử được xuất hiện trên trang web của mình. “Float” cho phép các phần tử di chuyển sang trái hoặc phải của phần tử cha, trong khi "clear" đảm bảo rằng không có phần tử nào được ảnh hưởng bởi các phần tử đã được “float”. Ngay bây giờ CNET sẽ giúp bạn hiểu rõ hơn về cách sử dụng hai thuộc tính này để tạo ra cấu trúc trang linh hoạt và hấp dẫn.
- Thuộc tính Float
- Thuộc tính Clear
- Ứng dụng của Float và Clear trên Website
1. Thuộc tính Float
Khái niệm Float trong CSS
Thuộc tính float là thuộc tính quan trọng giúp xây dựng các bố cục linh hoạt và hiệu ứng trên Website, được sử dụng để định vị và định dạng nội dung, căn chỉnh văn bản, hình ảnh hoặc các phần tử khác theo chiều ngang của trang Web.
Thuộc tính float có thể có một trong các giá trị sau:
- left - Phần tử chuyển qua bên trái vùng chứa của nó
- right - Phần tử chuyển qua bên phải vùng chứa của nó
- none - Phần tử giữ nguyên (sẽ hiển thị ngay tại vị trí nó xuất hiện trong văn bản). Đây là giá trị mặc định
- inherit - Phần tử kế thừa giá trị float của phần tử cha
Như ở trên ví dụ trên, hình ảnh quả dứa khi sử dụng thuộc tính float: right; hình ảnh sẽ chuyển sang bên phải trong đoạn văn và văn bản trong đoạn văn sẽ bao quanh hình ảnh.
Tính chất của Float
- Di chuyển về phía trái hoặc phải: Float di chuyển phần tử về phía trái hoặc phải của phần tử cha, với các phần tử khác đặt xung quanh nó.
- Không chiếm diện tích: Phần tử sử dụng float sẽ không chiếm diện tích theo chiều ngang, nên phần tử khác có thể đặt cạnh nhau.
- Không ảnh hưởng đến phần tử chính nó: Float không làm thay đổi kích thước của phần tử chính nó, mà chỉ ảnh hưởng đến cách các phần tử khác được định vị xung quanh nó.
Lưu ý: Khi một phần tử được float, nó sẽ không còn chiều cao. Điều này có thể ảnh hưởng đến bố cục của trang, vì vậy cần phải sử dụng các kỹ thuật như clearfix để xử lý vấn đề này.
2. Thuộc tính Clear
Thuộc tính clear được sử dụng để quyết định cách xử lý các phần tử sau khi đã sử dụng thuộc tính float trên các phần tử trước đó. Clear là một công cụ quan trọng để đảm bảo rằng các phần tử sau không bị ảnh hưởng bởi các phần tử đã sử dụng float, đặc biệt là trong các trường hợp khi bạn muốn ngăn chặn các phần tử tiếp theo "dính" vào các phần tử float.
Giá trị của thuộc tính clear có thể có một trong các giá trị sau:
- none - Đây là giá trị mặc định của clear. Phần tử không bị xóa float và có thể di chuyển vào bất kỳ bên nào của các phần tử đã được float.
- left - Bên trái của phần tử không được float.
- right - Bên phải của phần tử không được float.
- both - Bên trái và phải của phần tử không được float.
- inherit - Phần tử kế thừa giá trị rõ ràng từ phần tử cha
Sử dụng clear đảm bảo rằng các phần tử sẽ không bị chồng chéo lên nhau do float, giúp bố cục trang web trở nên chính xác và dễ đọc hơn.
Ví dụ, để đảm bảo rằng một phần tử không bị ảnh hưởng bởi các phần tử đã được float ở cả bên trái, bạn có thể sử dụng clear với giá trị left:
Ở ví dụ trên:
- div2 đứng sau div1 trong mã HTML. Tuy nhiên, vì div1 float: left; nên văn bản trong div2 sẽ di chuyển xung quanh div1
- div3 dùng float: left; văn bản trong div4 sẽ di chuyển xung quanh div3 tuy nhiên div4 - sử dụng clear: left; nên di chuyển div4 xuống dưới div3 . Giá trị "left" xóa các phần tử float bên trái.
Vì vậy kết quả của ví dụ trên sẽ được hiển thị:
3. Ứng dụng của Float và Clear trên Website
Float và Clear là hai thuộc tính quan trọng trong CSS có thể được sử dụng để tạo ra các bố cục trên trang web. Một số ứng dụng phổ biến của Float và Clear trên website thường được sử dụng phổ biến như:
- Tạo bố cục dạng cột: Float được sử dụng để di chuyển các phần tử về phía trái hoặc phải của phần tử cha, tạo ra các cột song song trên trang web. Clear đảm bảo rằng các phần tử sau không bị ảnh hưởng bởi float của các phần tử trước đó, giúp bố cục trang web đúng đắn và dễ đọc.
- Thiết kế giao diện đa cột: thường được sử dụng để tạo ra các giao diện đa cột, trong đó có cột chính và các cột phụ. Float được áp dụng cho cột chính và clear được sử dụng để đảm bảo các cột phụ không bị ảnh hưởng bởi float của cột chính.
- Hiển thị hình ảnh và mô tả: Float thường được sử dụng để căn chỉnh hình ảnh và mô tả của chúng, cho phép chúng hiển thị cạnh nhau hoặc theo chiều ngang.
- Tạo menu đa cấp: Float và Clear có thể được sử dụng để tạo ra các menu đa cấp, trong đó các mục menu con xuất hiện bên dưới các mục menu cha. Clear được sử dụng để đảm bảo rằng các mục menu con không bị ảnh hưởng bởi float của các mục menu cha.
- Tạo bố cục responsive: có thể được sử dụng để tạo ra các bố cục responsive, tự động điều chỉnh khi kích thước của trình duyệt thay đổi. Các kỹ thuật như media queries và phần tử block containers có thể kết hợp với float và clear để tạo ra các bố cục linh hoạt phù hợp với mọi loại thiết bị.
Chúng ta đã đi lược qua về 2 thuộc tính Float và Clear trong CSS, hiểu được các giá trị và tính chất của chúng. Hãy sử dụng chúng một cách sáng tạo và linh hoạt để tạo ra các trải nghiệm người dùng tốt hơn và tăng tính tương tác trên trang web của mình. Cùng CNET tìm hiểu các thuộc tính tiếp theo ở bài viết sau nhé!
Tham khảo về KHÓA HỌC LẬP TRÌNH WEB FULL-STACK tại Học viện công nghệ CNET
