Thuộc tính Float và Clear trong CSS
-
By Phạm Thị Quỳnh Dung - Kiến thức cơ bản
- 09/09/2024
- 6 minutes read
- 272 Views
Trong CSS có rất nhiều thuộc tính với những chức năng khác nhau. Bài viết này Pho Tue Software Solutions sẽ giới thiệu tới bạn thuộc tính Float và Clear trong CSS.
Trong CSS có rất nhiều thuộc tính với những chức năng khác nhau. Bài viết này Pho Tue Software Solutions sẽ giới thiệu tới bạn thuộc tính Float và Clear trong CSS.
Thuộc tính Float
Thuộc tính Float được sử dụng để chuyển vị trí và định dạng nội dung một phần tử, ví dụ, chuyển một hình ảnh sang góc trái hoặc phải so với chữ trong không gian bao quanh nó. Thuộc tính này rất cần thiết trong việc định dạng bố cục trang và chia bố cục HTML của một trang web.
Như bạn đã biết, hiện nay việc sử dụng thẻ div hay các thẻ HTML5 bao gồm header, footer và article để bố cục trang là khá phổ biến. Tuy nhiên, theo mặc định, các phần tử HTML của trang web là không float.
Để giải quyết được vấn đề trên, bạn có thể sử dụng thuộc tính Float vì Float có thể thực hiện một trong các giá trị như sau:
left - Phần tử chuyển sang bên trái của container
right - Phần tử chuyển sang bên phải của container
none - Phần tử giữ nguyên vị trí của nó (trạng thái bình thường). Mặc định.
inherit - Phần tử con kế thừa thuộc tính float của phần tử cha.
Theo cách dùng đơn giản nhất, thuộc tính Float có thể được dùng để phân bổ chữ bao quanh các hình ảnh.
Cú pháp chung của Float
tagName {
float: giá trị;
}
Lưu ý: Nếu một phần tử được float sang trái hoặc phải (float: left hoặc float: right) thì tất cả các thẻ cùng cấp khác theo sau nó sẽ được đẩy lên trên và lấp đầy chỗ trống của hàng chứa các thẻ đó.
Ví dụ minh họa cho thuộc tính Float
Để hiểu rõ hơn về các lệnh trong thuộc tính Float, hãy cùng xem qua các ví dụ dưới đây.
Float:right - ví dụ đưa hình ảnh nổi lên ở bên phải của văn bản
<!DOCTYPE html>
<html>
<head>
<style>
img { float: right}
p{ background:#FFFACD}
</style>
</head>
<body>
<p><img src="qua-nho.jpg" alt="Quả nho" style="width:170px;height:170px;
margin-left:15px;">
Nội dung của văn bản</p>
</body>
</html>
Float: left - ví dụ hiển thị hình ảnh ở bên trái văn bản.
<!DOCTYPE html>
<html>
<head>
<style>
img { float: left}
p{ background:#FFFACD}
</style>
</head>
<body>
<p><img src="qua-nho.jpg" alt="Quả nho" style="width:170px;height:170px;
margin-left:15px;">
Nội dung của văn bản</p>
</body>
</html>
Float: none - ví dụ hiển thị hình ảnh ở vị trí mặc định
<!DOCTYPE html>
<html>
<head>
<style>
img { float: none}
p{ background:#FFFACD}
</style>
</head>
<body>
<p><img src="qua-nho.jpg" alt="Quả nho" style="width:170px;height:170px;
margin-left:15px;">
Nội dung của văn bản</p>
</body>
</html>
Thuộc tính Clear
Thuộc tính Clear gần như là ngược lại với float và giải quyết các vấn đề của Float (đã được nêu trong phần lưu ý của Float). Thuộc tính Clear ngăn chặn thành phần A chiếm vùng không gian của thành phần B (thành phần sử dụng float).
Thuộc tính Clear được sử dụng thông dụng nhất là sau khi bạn sử dụng thuộc tính Float cho một phần tử. Trong trường hợp một phần tử được float: left, thì bạn nên sử dụng clear: left. Phần tử được float sẽ tiếp tục nổi, còn những phần tử bị xóa sẽ hiển thị bên dưới phần tử đó trên trang web.
Ví dụ của clear: left:
div {
clear: left;
}
Clearfix
Không có clearfix
Có clearfix
Phần tử được float cao hơn so với phần tử chứa nên sử dụng thuộc tính clearfix với giá trị overflow: auto để khắc phục.
.clearfix {
overflow: auto;
}
Tổng kết
Từ những chia sẻ trên đây, bạn sẽ rõ hơn về thuộc tính Float và Clear trong CSS để có thể thiết kế trang web thêm sinh động và đạt hiệu quả công việc. Sau bài viết này, hy vọng rằng ta có thể rút ra được rằng ta nên chia rõ bố cục các phần tử trong trang web trước khi lên trang web. Cùng đón đọc những bài viết tới nhé. |
Phạm Thị Quỳnh Dung
Pho Tue SoftWare CO.,LTD là Nhà Cung cấp dịch Trung Tâm Dữ Liệu, Điện Toán Đám Mây Và Phát Triển Phần Mềm Hàng Đầu Việt Nam. Hệ Thống Data Center Đáp Ứng Mọi Nhu Cầu Với Kết Nối Internet Nhanh, Băng Thông Lớn, Uptime Lên Đến 99,99% Theo Tiêu Chuẩn TIER III-TIA 942.
Leave a comment
Your email address will not be published. Required fields are marked *