Khi thiết kế trang web, bạn quyết định phần tử cụ thể nên xuất hiện vị trí nhất định. Ví dụ, muốn hộp chứa hình ảnh xuất hiện bên phải trang.
Trong CSS, thuộc tính float dùng chỉ định cách phần tử được định vị. Float dùng định vị phần tử bên trái hoặc phải trang web.
Hướng dẫn thảo luận, tham chiếu ví dụ, cách dùng CSS float định vị phần tử trang web. Cuối hướng dẫn, bạn chuyên gia float phần tử trang web dùng CSS.
Thuộc tính CSS Float
Thuộc tính float dùng định vị phần tử trái hoặc phải trang web. Ví dụ, float dùng định vị hình ảnh bên phải văn bản trong hộp trang web.
Thuộc tính float chỉ áp dụng phần tử tạo hộp và không định vị tuyệt đối trang web. Phần tử định vị tuyệt đối là phần tử web định vị tương đối phần tử cha đầu tiên có position khác static.
Bốn giá trị phổ biến float:
- left (phù phần tử trái container)
- right (phù phần tử phải container)
- none (không float áp dụng)
- inherit (phần tử float dùng float áp dụng cho container cha).
Cách dùng phổ biến float là bao văn bản quanh hình ảnh CSS.
Ví dụ CSS Float
Giả sử thiết kế website câu lạc bộ Stargazer Blazers quan sát sao. Câu lạc bộ muốn trang web phác thảo lịch sử tổ chức. Trang cần mô tả ngắn câu lạc bộ, và hình ảnh sao định vị trái trang.
81% người tham gia cho biết họ cảm thấy tự tin hơn về cơ hội việc làm công nghệ sau khi tham gia bootcamp. Được ghép nối với bootcamp ngay hôm nay.
Sinh viên trung bình của bootcamp dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được việc đầu tiên.
Ta dùng float tạo trang web. Mã cơ bản trang web, không float:
index.html <div> <p><img src="https://images.unsplash.com/photo-1465101162946-4377e57745c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1357&q=80" height="200" width="200" /> Hội Stargazer Blazers, thành lập 2017, tận tụy quan sát sao San Francisco, CA. Hội tạo sau cuộc họp hai người đam mê sao Bay Area, Jeff Holmes và Paula Ingleson, tìm người khác thảo luận đam mê. Hôm nay, tổ chức trên 200 thành viên Bay Area, gặp hàng tháng quan sát sao thảo luận phát hiện. </p> </div>
Mã trả về:
Trong ví dụ, hình ảnh xuất hiện trước văn bản, tổng thể trang không thẩm mỹ. Tuy nhiên, dùng float, ta định vị hình ảnh bên cạnh văn bản.
Mã định vị hình ảnh phải văn bản (yêu cầu hội quan sát sao):
styles.css
img { float: right; }
Mã trả về:
Phân tích mã. Đầu, định nghĩa <div> chứa mã trang. Sau dùng <p> tạo văn bản, bao gồm mô tả lịch sử câu lạc bộ. Bên trong <p>, cũng bao hình ảnh sao, kích thước 200x200.
Trong styles.css, dùng float: right; phù hình ảnh phải văn bản. Mặc định, hình ảnh xuất hiện trước văn bản.
Bây giờ, giả sử hội quan sát sao nhờ định vị hình ảnh trái văn bản. Làm với mã:
styles.css
img { float: left; margin-right: 20px; }
Mã trả về:
Trong ví dụ, phù hình ảnh trái văn bản. Cũng chỉ định margin-right: 20px; tạo khoảng cách giữa trái hình ảnh và văn bản.
Lưới Hộp với Float (Box Grid with Float)
Thuộc tính float cho phép tạo hộp nội dung xuất hiện cạnh nhau.
Giả sử hội quan sát sao muốn ba hình ảnh xuất hiện cạnh nhau, hiển thị sao mọi người thấy nếu tham gia.
Ta dùng mã:
index.html
<div>
<img src="https://images.unsplash.com/photo-1492446190781-58ac4285911d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1294&q=80" height="200" width="200" class="image" />
<img src="https://images.unsplash.com/photo-1456154875099-97a3a56074d3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1189&q=80" height="200" width="200" class="image" />
<img src="https://images.unsplash.com/photo-1435224668334-0f82ec57b605?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" height="200" width="200" class="image" />
</div>
styles.css
* { box-sizing: border-box; }
.image { float: left; width: 25%; padding: 25px; }
Mã trả về:
Phân tích mã. Tệp HTML, có <div> chứa ba hình ảnh (<img>). Mỗi hình 200x200 liên kết hình sao duy nhất. Thêm, mỗi hình gán class image.
Trong styles.css, ta:
- Áp box-sizing: border-box; cho mọi mục, padding và border tính trong tổng rộng/cao. Cho phép định vị cạnh nhau không khoảng trống mặc định.
- Dùng float: left; hình ảnh xuất hiện cạnh nhau.
- Dùng width: 25% mỗi hình chiếm 25% rộng trang.
- Dùng padding: 25px; tạo khoảng 25px giữa hình.
Kết luận
Thuộc tính CSS float đặt phần tử trái hoặc phải container. Cho phép văn bản và phần tử khác bao quanh phần tử float.
Hướng dẫn thảo luận, tham chiếu ví dụ, cách dùng CSS float định vị phần tử trái/phải container. Bây giờ bạn sẵn sàng dùng float như chuyên gia CSS!