Trước khi có Flexbox hay CSS Grid, các lập trình viên web thường dùng float để tạo bố cục chia cột, căn trái – phải.
Dù ngày nay ít còn dùng trong dự án hiện đại, nhưng hiểu về float giúp bạn đọc code cũ và xử lý lỗi layout tốt hơn.
Trong bài học này, bạn sẽ:
- Hiểu cách hoạt động của
float - Biết cách dùng
clearđể tránh vỡ bố cục - Áp dụng float để chia cột đơn giản
1. float là gì?
float giúp phần tử trôi về bên trái hoặc phải, làm cho các phần tử khác bao quanh nó nếu có thể.
.left-box {
float: left;
}
.right-box {
float: right;
}
float: left→ đẩy phần tử sang tráifloat: right→ đẩy sang phải
2. Vấn đề: phần tử cha bị “mất chiều cao”
Khi con dùng float, nó thoát khỏi dòng chảy, khiến phần tử cha không tự tính được chiều cao.
Ví dụ:
<div class="parent">
<div class="child" style="float:left;">Nội dung</div>
</div>
→ div.parent không thấy chiều cao của child, dẫn đến các lỗi về viền, nền, v.v.
3. Giải pháp: dùng clear hoặc clearfix
a. clear
Sử dụng clear để bắt phần tử kế tiếp xuống dòng, tránh chồng lấn:
.clearfix {
clear: both;
}
<div style="float:left;">A</div>
<div style="float:right;">B</div>
<div class="clearfix"></div>
b. clearfix (chuẩn hiện nay)
.clearfix::after {
content: "";
display: table;
clear: both;
}
Thêm class .clearfix vào phần tử cha để nó nhận đúng chiều cao:
<div class="container clearfix">
<div style="float:left; width:50%;">Cột trái</div>
<div style="float:right; width:50%;">Cột phải</div>
</div>
4. float thường dùng để làm gì?
Trước đây:
- Chia 2 – 3 cột trên web
- Căn hình ảnh bên trái/phải đoạn văn
- Tạo menu ngang
Hiện nay, bạn chỉ nên dùng float cho:
- Căn ảnh nhỏ bên trái/phải
- Trường hợp đơn giản hoặc yêu cầu tương thích trình duyệt cũ
5. Thực hành: chia 2 cột bằng float
style.css
.container {
width: 100%;
background: #f1f1f1;
overflow: hidden; /* Cách khác để fix mất chiều cao */
margin-bottom: 30px;
}
.left, .right {
width: 48%;
padding: 1%;
box-sizing: border-box;
}
.left {
float: left;
background: #ffccbc;
}
.right {
float: right;
background: #c5e1a5;
}
.image-float {
float: right;
margin: 10px;
width: 150px;
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bài 13 – Float và Clear</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="left">Cột bên trái</div>
<div class="right">Cột bên phải</div>
</div>
<p>
<img class="image-float" src="https://picsum.photos/150" alt="Ảnh ví dụ">
Đây là đoạn văn có ảnh trôi bên phải. Văn bản sẽ bao quanh ảnh.
Bạn có thể dùng `float: right` để làm kiểu trình bày báo chí.
</p>
</body>
</html>
6. Ghi nhớ
| Thuộc tính | Tác dụng |
|---|---|
float: left/right | Đẩy phần tử sang trái/phải, cho phép trôi |
clear: both | Ngăn phần tử bị trôi kèm theo |
clearfix | Giữ chiều cao cho phần tử cha khi dùng float |
Khi nào nên dùng float?
- Không nên dùng để làm bố cục chính nữa
- Float hiện tại chủ yếu dùng cho trình bày ảnh trong nội dung
Thảo luận