Thuộc tính CSS rõ ràng là một phần của CSS từ CSS1. Nó cho phép bạn chỉ định những phần tử nào có thể nổi bên cạnh phần tử đã xóa và ở bên nào. Thuộc tính rõ ràng có năm giá trị có thể có:
- không ai
- trái
- đúng
- cả hai
- thừa kế
Cách sử dụng thuộc tính rõ ràng của CSS
Cách phổ biến nhất để sử dụng thuộc tính rõ ràng là sau khi bạn đã sử dụng một thuộc tính float trên một phần tử. Ví dụ:
Văn bản bên cạnh hình ảnh của tôi.
Văn bản bên dưới hình ảnh của tôi.
Tất cả các thành phần mặc định để xóa: none; , vì vậy nếu bạn không muốn các yếu tố khác nổi lên bên cạnh thứ gì đó, bạn phải thay đổi phong cách rõ ràng.
Khi bạn thanh toán bù trừ phao nổi, bạn khớp rõ ràng với phao của bạn. Vì vậy, nếu bạn thả phần tử sang bên trái, thì bạn nên rõ ràng ở bên trái. Phần tử lưu hành của bạn sẽ tiếp tục trôi nổi, nhưng phần tử đã xóa và mọi thứ sau khi nó sẽ xuất hiện bên dưới nó trên trang web.
Nếu bạn có các phần tử được thả vào cả bên phải và bên trái, bạn có thể xóa một bên hoặc bạn có thể xóa cả hai phần tử.
Sử dụng rõ ràng trong Bố cục
Cách phổ biến nhất mà hầu hết các nhà thiết kế sử dụng thuộc tính rõ ràng là bố trí các phần tử trang . Bạn có thể có một hình ảnh nổi bên trong một khối văn bản và muốn đoạn tiếp theo bắt đầu bên dưới hình ảnh hoặc bạn có thể có toàn bộ cột văn bản mà bạn muốn nổi bên cạnh một nhóm văn bản khác, với một số văn bản xuất hiện bên dưới.
Đây là HTML cho bố cục trong biểu mẫu này.
Nó có một thùng chứa div chứa một ngăn chứa khác được thả ở bên trái.
Một div thả nổi ngắn
Nội dung bên trong div vùng chứa sẽ nằm ở bên phải của div được thả nổi.
Điều này sẽ làm việc tốt, với div ngắn hơn nổi bên trái của phần còn lại của nội dung của div chính.
Bạn có thể xóa văn bản bên cạnh hộp thả nổi bằng cách thêm một thẻ mà bạn muốn nó bắt đầu viết dưới hộp thả nổi.
Nhưng vấn đề xảy ra khi hộp thả nổi dài hơn nội dung bên cạnh nó. Sau đó, như bạn có thể thấy, màu nền của hộp chính không được chuyển xuống đáy hộp nổi.
May mắn thay, có một cách dễ dàng để sửa lỗi này: tài sản. Bằng cách thiết lập hộp chính để tràn: tự động; màu nền sẽ vẫn ở bên cạnh hộp thả dài còn lại ở phía dưới cùng, như trong ví dụ này .