Thuộc Tính Float Và Clear Trong CSS - Bizfly Cloud

Trang chủ » Câu Lệnh Float Trong Css » Thuộc Tính Float Và Clear Trong CSS - Bizfly Cloud

Có thể bạn quan tâm

  • Techblog
  • Kiến thức cơ bản
Thuộc tính Float và Clear trong CSSBizfly Cloud72918-05-2020
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

Thuộc tính Float và Clear trong CSS - Ảnh 1.

<!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.

Thuộc tính Float và Clear trong CSS - Ảnh 2.

<!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

Thuộc tính Float và Clear trong CSS - Ảnh 3.

<!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;

}

Thuộc tính Float và Clear trong CSS - Ảnh 4.

Clearfix

Không có clearfix

Thuộc tính Float và Clear trong CSS - Ảnh 5.

Có clearfix

Thuộc tính Float và Clear trong CSS - Ảnh 6.

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.
TAGS: CSSSHAREFacebookTwitter

Từ khóa » Câu Lệnh Float Trong Css