Thuộc Tính Float Trong CSS - Tự Học CSS

Thuộc tính float của CSS chỉ định sắp xếp phần tử theo chiều ngang. Đây là thuộc tính dàn trang căn bản mà bất cứ lập trình viên phát triển web nào cũng phải biết.

Mặc dù với nhiều phương pháp CSS hiện đại người ta đã ít sử dụng Float. Nhưng hiểu biết về nó là không thể thiếu được.

Với thuộc tính float bạn có đẩy các phần tử sang trái hoặc phải, nhưng nó chỉ áp dụng cho các phần tử tạo ra các hộp không được định vị tuyệt đối (absolute).

Xem bài viết: CSS Postion để biết thêm chi tiết về định vị tuyệt đối.

Bất kỳ phần tử nào theo sau phần tử float sẽ chảy xung quanh phần tử float ở phía bên kia.

Thuộc tính float có thể có một trong ba giá trị:

• left: Phần tử được đẩy về phía bên trái của khối chứa nó.
• right: Phần tử được đẩy về phía bên phải của khối chứa nó.
• none: Loại bỏ thuộc tính float khỏi một phần tử.

Cách sử dụng thuộc tính float trong CSS

Một phần tử float sẽ được đưa ra khỏi luồng thông thường và chuyển sang cuối cùng bên trái hoặc bên phải trong không gian có sẵn của phần tử chứa nó.

Các phần tử khác thường chảy xung quanh các phần tử float, trừ khi chúng bị ngăn cản bởi thuộc tính clear.

Các phần tử float được đẩy theo theo chiều ngang, có nghĩa là một phần tử chỉ có thể được đẩy sang trái hoặc sang phải, không thể đẩy lên trên hoặc xuống dưới.

Ví dụ:

HTML:

<p><img src="/images/logo.jpg"/>Đây là ví dụ minh họa sử dụng thuộc tính float trong CSS. Ở đây, chúng ta sẽ áp dụng thuộc tính float: left cho phần tử img. Khi đó chúng ta được kết quả như thế này</p>

CSS:

img { float: left; width: 150px; height: 150px; margin-right: 20px; }

Lưu ý: Nhớ lưu 1 ảnh với tên là logo.jpg ở thư mục images (cùng cấp với file html) để có thể thấy thuộc tính float hoạt động rõ hơn nhé.

Và, nếu một số phần tử float được đặt liền nhau, chúng sẽ nổi cạnh nhau nếu có đủ khoảng trống theo chiều ngang.

Nếu không có đủ chỗ, phần tử được được dịch chuyển xuống hàng bên dưới dưới cho đến khi khớp hoặc không còn phần tử float nào nữa.

HTML:

<ul> <li class="thumbnail"><img src="/images/a.jpg"></li> <li class="thumbnail"><img src="/images/b.jpg"></li> <li class="thumbnail"><img src="/images/c.jpg"></li> <li class="thumbnail"><img src="/images/d.jpg"></li> </ul>

CSS:

ul{ margin: 0; padding: 0; list-style: none; } .thumbnail { float: left; width: 125px; height: 125px; margin: 10px; }

Tắt float bằng cách sử dụng thuộc tính clear

Các phần tử tiếp sau phần tử float sẽ chảy xung quanh nó, nó có thể phá vỡ bố cục của bạn. Để giải quyết vấn đề này, thuộc tính clear chỉ định không cho phép mặt nào của xuất hiện phần tử float.

HTML:

<p>Đẩy phần tử sang bên trái.</p> <p class="clear">Không phần tử float nào được phép ở bên trái phần tử này</p>

CSS:

.clear { clear: left; } p { float: left; margin: 10px; padding: 10px; background: yellow; }

Lưu ý: Thuộc tính này chỉ có thể xóa một phần tử khỏi các hộp float trong cùng một khối. Nó không xóa phần tử khỏi các hộp float con trong chính phần tử đó. Để biết thêm về cách xóa float, bạn sẽ được học trong bài hướng dẫn về CSS Alignment.

Học tiếp: Thuộc tính Float trong CSS

Đọc thêm: Thuộc tính z-index trong CSS