Float trong CSS

Chia sẻ: Diem Diem | Ngày: | Loại File: PDF | Số trang:7

Thêm vào BST

Báo xấu

60
lượt xem 7
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

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.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Float trong CSS

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 Tiêu đề trang web Thành phần A. Thành phần B. Hiển thị trình duyệt khi chưa có CSS CSS Để dễ hình dung thuộc tính float, ta sẽ cho thành phần và 2 thành phần có nội dung như sau: * { margin: 0; padding: 0; } div { border: 1px solid red; } p.first { background: #f3f3cf; height: 100px; }
p.second { background: #e0e0fc; height: 100px; } Hiển thị trình duyệt khi chưa sử dụng float 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: 0; padding: 0; } div { border: 1px solid red; } p.first { background: #f3f3cf; float: left; height: 100px; } p.second { background: #e0e0fc; height: 100px; } Hiển thị trình duyệt khi sử dụng float cho thành phần A
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; } p.first { background: #f3f3cf; float: left; height: 100px; } p.second { background: #e0e0fc; height: 100px; } Hiển thị trình duyệt khi đã tắt background cho thành phần A Phân tích:  Nhìn vào kết quả ta thấy màu background và vùng không gian của thành phần B đã chiếm vùng không gian của thành phần A, kết quả này là do khi sử dụng thuộc tính float, thành phần nào sử dụng float sẽ được giải phóng vùng không gian ban đầu, khu vực này sẽ trở thành vùng trống, và sẽ bị vùng không gian của những thành phần khác lập tức chiếm lấy.  Vậy tại sao thành phần B lại không nằm vị trí của thành phần A hay vị trí như ban đầu? ta hãy tưởng tượng có 2 tấm gỗ trôi trên mặt nước, không cần biết bên dưới mặt nước chuyển động như thế nào, 2 tấm gỗ vẫn không thể chồng lên nhau, cũng như vậy, thành phần B không thể nào chồng lên thành phần A được và vị trí của nó sẽ là vị trí của vùng
trống mới ngay bên cạnh thành phần A, khi này thẻ sẽ bao trọn vùng không gian của thành phần B, đây cũng là một đặc trưng của thuộc tính float. Ta hãy thêm chiều rộng bằng 100px vào cả 2 thành phần để xem điều gì xảy ra tiếp theo, đồng thời ta cũng trả lại màu background cho thành phần A: * { margin: 0; padding: 0; } div { border: 1px solid red; } p.first { background: #f3f3cf; float: left; height: 100px; width: 100px; } p.second { background: #e0e0fc; height: 100px; width: 100px; } Hiển thị trình duyệt khi đã phục hồi background cho thành phần A và sử dụng width: 100px cho cả 2 thành phần A và B Điều gì đã xảy ra với thành phần B?, màu background của thành phần B bị mất? và tại sao thành phần B lại thoát khỏi thẻ div bao ngoài?, để giải thích câu hỏi này, ta lại tạm thời xóa màu background của thành phần A: * { margin: 0; padding: 0; } div { border: 1px solid red; } p.first { background: #f3f3cf; float: left; height: 100px; width: 100px; }
p.second { background: #e0e0fc; height: 100px; width: 100px; } Trình duyệt hiển thị Phân tích: Sau khi vùng không gian của thành phần A được giải phóng, lập tức vùng không gian và vùng hiển thị của thành phần B chiếm chỗ, tuy nhiên thành phần B không thể nào chồng chập lên thành phần A (đã giải thích ở trên), và do vùng hiển thị hiện chỉ đủ chứa thành phần A, không đủ chỗ cho thành phần B nên thành phần B vẫn nằm ở vị trí như lúc đầu, nếu ta tăng chiều rộng sao cho đủ chỗ để chứa thành phần B thì thành phần B sẽ trôi lên ngang hàng với thành phần A: * { margin: 0; padding: 0; } div { border: 1px solid red; } p.first { background: #f3f3cf; float: left; height: 100px; width: 100px; } p.second { background: #e0e0fc; height: 100px; width: 150px; } Trình duyệt hiển thị
Ta hãy thử giải phóng vùng không gian của thành phần B bằng cách sử dụng thuộc tính float: left cho "p.second" đồng thời ta cũng trả lại màu background cho thành phần A: * { margin: 0; padding: 0; } div { border: 1px solid red; } p.first { background: #f3f3cf; float: left; height: 100px; } p.second { background: #e0e0fc; float: left; height: 150px; } Hiển thị trình duyệt khi đã phục hồi background cho thành phần A và sử dụng float: left cho thành phần B Ta nhận thấy: do vùng không gian của thành phần A và thành phần B đã được giải phóng, nên bên trong thẻ đã không còn chứa vùng không gian nào (ngoài vùng không gian của thẻ ) cho nên trình duyệt hiển thị như chúng ta thấy. Tới đây, bạn đã nắm được phần nào về khái niệm float, tuy vậy chúng ta chưa vội định nghĩa về float là gì, mà hãy tiếp tục xem thành phần A và thành phần B sẽ thể hiện như thế nào khi sử dụng thuộc tính float: right 2. float: right Sử dụng những thuộc tính CSS như trên, tuy nhiên ta sẽ sử dụng float: left cho thành phần A và float: right cho thành phần B Code CSS như sau:
* { margin: 0; padding: 0; } div { border: 1px solid red; } p.first { background: #f3f3cf; float: left; height: 100px; } p.second { background: #e0e0fc; float: right; height: 100px; } Trình duyệt hiển thị: Nhìn vào kết quả ta thấy: vùng không gian của thành phần A và thành phần B đều được giải phóng, khác kết quả trên, lần này thành phần B trôi về bên phải. 3. float: none float: none là trả về giá trị float như bình thường, coi như thành phần chưa sử dụng float, thường được sử dụng để phục hồi giá trị float cho thành phần. 4. Định nghĩa về float Từ những ví dụ về float: left và float: right ta có thể rút ra kết luận về thuộc tính float như sau:  Thành phần nào sử dụng float sẽ được giải phóng vùng không gian, vùng không gian này sẽ trở thành vùng trống, và sẽ bị vùng không gian của những thành phần liền kề nó lập tức chiếm lấy.  Khi sử dụng float, các thành phần không chồng chập lên nhau, mà sẽ sắp xếp vị trí tùy thuộc vào chiều rộng của vùng trống.  Khi sử dụng float: left, vùng không gian của thành phần sẽ được giải phóng và thành phần sẽ trôi sang trái.  Khi sử dụng float: right, vùng không gian của thành phần sẽ được giải phóng và thành phần sẽ trôi sang phải.