tailieunhanh - Float trong CSS

Float là kỹ thuật dùng rất nhiều trong thiết kế giao diện bằng CSS dùng để tách một thành phần bất kỳ khỏi cách hiển thị thông thường của nó để tạo chỗ cho những thành phần ở sau di chuyển lên và phủ đầy chỗ trống nếu có. Để hiểu rõ hơn về điều này mời các bạn tham khảo tài liệu Float trong CSS sau đây. | Float trong CSS Thuộc tính float xác định sự trôi nổi của thành phần. Nếu chỉ định nghĩa thuộc tính float đơn giản như vậy chắc chắn chúng ta sẽ không thể nào hiểu được thuộc tính này vì vậy ta hãy xem trước các giá trị của float để xem thuộc tính float tác động lên thành phần như thế nào rồi sau đó sẽ rút ra định nghĩa về float float left float right float nOne Định nghĩa float Code HTML DOCTYPE html PUBLIC - W3C DTD XHTML Transitional EN http TR xhtml1 DTD html head meta http-equiv Content-Type content text html charset utf-8 title Tiêu đề trang web title link href css rel stylesheet type text css media screen print head body div p class first Thành phần A. p p class second Thành phần B. p div body html Hiển thị trình duyệt khi chưa có CSS Thành phần A. Thành phần B CSS Để dễ hình dung thuộc tính float ta sẽ cho thành phần div và 2 thành phần p có nội dung như sau margin 0 padding 0 div border 1px solid red background f3f3cf height 100px background e0e0fc height 100px Hiển thị trình duyệt khi chưa sử dụng float Thành phần A Thành phần B 1. float left Trước khi định nghĩa về float left ta hãy xem ví dụ sau đây Ta thêm nội dung float left cho thành phần A margin padding 0 0 div border 1px solid red background f3f3cf float l eft height 100px background e0e0fc height 100px Hiển thị trình duyệt khi sử dụng float cho thành phần A Thành phần A Thành phần B Kết quả cho thấy background của thành phần A hiện chỉ còn phần chứa text và chiều cao của nó còn thành phần B đã không còn nằm vị trí ban đầu để giải thích cho điều này ta hãy tạm thời xóa màu background của thành phần A Code CSS margin 0 padding 0 div border 1px solid red background f3f3cf float left height 100px background e0e0fc height 100px Hiển thị trình duyệt khi đã tắt background cho thành phần A Thành phần A Thành phần B Phân tích Thành phần phần B Nhìn vào kết quả ta thấy màu background và vùng không .

• Đồ họa - Thiết kế - Flash
• Float trong CSS
• Tác dụng của Float
• Thuộc tính Float
• Trình duyệt sử dụng Float
• Ưu điểm của Float
• Thành phần sử dụng Float