Float trong CSS: thuộc tính float được sử dụng để điều chỉnh vị trí của một phần tử bằng cách đẩy nó sang trái hoặc sang phải của phần tử chứa nó. Ban đầu, thuộc tính này được thiết kế để tạo hiệu ứng dòng nổi (float) cho hình ảnh bên cạnh văn bản, nhưng sau này, nó đã được sử dụng để tạo cấu trúc layout phức tạp hơn.
Khi một phần tử được thiết lập float, nó sẽ bị di chuyển ra khỏi luồng thông thường của tài liệu, và các phần tử khác xung quanh nó sẽ tự động điều chỉnh vị trí để tránh xếp chồng lên phần tử đã float.
Dưới đây là một ví dụ cơ bản về cách sử dụng thuộc tính float:
HTML:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Float Example</title>
</head>
<body>
<div class="container">
<div class="float-box">Floated Box</div>
<p>This is some text that comes after the floated box. It will wrap around the floated box.</p>
</div>
</body>
</html>
CSS (styles.css):
css
.container {
width: 300px;
border: 1px solid black;
padding: 10px;
}
.float-box {
width: 100px;
height: 100px;
background-color: lightblue;
float: left; /* Đẩy phần tử sang trái */
margin-right: 10px; /* Khoảng cách từ phần tử khác */
}
Trong ví dụ này, chúng ta có một phần tử .container chứa một hộp .float-box và một đoạn văn bản. Phần tử .float-box được thiết lập float: left, điều này đẩy nó sang trái và làm cho đoạn văn bản bên dưới nó tự động bao quanh.
Lưu ý rằng việc sử dụng float có thể dẫn đến một số vấn đề trong việc kiểm soát layout, như khi các phần tử không nằm chính xác theo mong đợi hoặc không thể đẩy về hàng tiếp theo nếu không được điều chỉnh cẩn thận. Trong các dự án hiện đại, float thường được thay thế bằng các phương pháp layout linh hoạt hơn như Flexbox và CSS Grid.