Trong hai bài học trước, chúng ta đã tìm hiểu xong về div và cách sử dụng id đặt tên cho div như thế nào. Tiếp theo, chúng ta sẽ cùng tìm hiểu một thuộc tính rất quan trọng nữa, đó là thuộc tính float trong css.
1. Lý do cần học float ?
Ví dụ tôi có 3 thẻ div như sau:
Bởi vì thẻ div là khối dữ liệu rơi tự do. Nên khi chúng ta hiển thị 3 thẻ div trên với cách viết css bình thường thì chúng ta sẽ được thế này.
Nếu các bạn muốn hiển thị 3 thẻ div thành một hàng ngang có 3 cột giống như hình dưới này thì chúng ta phải sử dụng thuộc tính float.
2. Thuộc tính float là gì?
Các bạn có thể hiểu float như áo phao để cho một đối tượng nào đó nổi lên mặt sông.
Có 2 loại thường dùng là
- float: left; (phao sẽ nổi lên phía bên trái)
- float: right; (phao sẽ nổi lên phía bên phải)
Nếu chúng ta muốn 3 thẻ div (tím, vàng, xanh trong hình trên) dàng thành một hàng ngang 3 cột thì chúng ta sẽ viết như sau:
Trong file layout.html
Trong file style.css
Các bạn hãy chạy thử trên trình duyệt để xem kết quả.
3. Thuộc tính clear
Thuộc tính clear được dùng để xóa thuộc tính float.
Nếu chúng ta gặp trường hợp bị thuộc tính float ảnh hưởng và muốn xóa thuộc tính này thì chúng ta dùng thuộc tính clear như sau:
- Xóa float: left; dùng clear: left;
- Xóa float: right; dùng clear: right;
Xem hướng dẫn chi tiết trong video
