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 Bizfly Cloud 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é. Theo Bizfly Cloud chia sẻ >> Có thể bạn quan tâm: So sánh 2 CSS Preprocessor: Sass vs Stylus Bizfly Cloud là hệ sinh thái điện toán đám mây được vận hành bởi VCCorp - Công ty dẫn đầu trong lĩnh vực công nghệ và truyền thông tại Việt Nam. Với đội ngũ kỹ thuật viên trình độ cao và kinh nghiệm lâu năm làm việc trên các công nghệ khác nhau như cloud, mobile, web..., chúng tôi có đủ khả năng để hỗ trợ đưa ra những giải pháp và công nghệ toàn diện giúp doanh nghiệp chuyển đổi số thành công. Dành cho độc giả quan tâm tới các dịch vụ đám mây do Bizfly Cloud cung cấp có thể truy cập tại đây. |
