Thuộc tính float trong CSS

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).

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ử.

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;
}

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.

Trên đây là bài viết của eLib.VN về thuộc tính float trong CSS. Trước khi chuyên từ một file PSD sang một file HTML thì bạn nên vạch rõ chia bổ cục trước rồi mới code các phần nhỏ bên trong. Và qua bài này bạn đã biết cách sử dụng thẻ div kết hợp với thuộc tính float:left và float:right trong CSS để chia bổ cục layout. Nếu bạn là người đang học CSS thì đây là chủ đề khá quan trọng đấy nhé.