Tìm hiểu thuộc tính Float và Clear trong CSS

float-clear-css

Khi chia bố cục layout cho website bạn sẽ cần dùng tới float và clear. Đây là hai thuộc tính cơ bản bất kỳ ai học HTML và CSS đều cần phải biết. Vậy cách sử dụng float, clear trong CSS như thế nào? Bài viết sau đây mình sẽ giúp bạn hiểu rõ hơn về cách dùng.

Hiểu rõ thuộc tính Float trong CSS

Định nghĩa: Float sẽ kéo phần tử sang bên trái hoặc bên phải.

Cú pháp:

float: left | right | none | inherit;

Giải thích:

  • left: phần tử được kéo sang trái
  • right: phần tử được kéo sang bên phải
  • none: mặc định, không thiết lập thuộc tính float
  • inherit: thừa hưởng đặc điểm của phần tử cha

Lấy một ví dụ về tạo menu, thường dùng là thẻ danh sách ul li

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
</ul>

</body>
</html> 

Tiếp theo đó mình sẽ viết một đoạn mã CSS như sau:

ul li {
    float: left;
}

Các phần tử li đã được kéo sang bên trái và nằm cùng một hàng rồi.

Qua ví dụ trên bạn sẽ thấy rằng khi dùng float các phần tử sẽ nối đuôi nhau chạy theo sau.

Ví dụ tiếp theo:

<!DOCTYPE html>
<html>
<head>
<style>
.left-box {
    width: 300px;
    height: 100px;
    border: 1px solid green;
    float: left;
}
.right-box {
    width: 300px;
    height: 100px;
    border: 1px solid green;
    float: right;
}
</style>
</head>
<body>

<div class="left-box"></div>
<div class="right-box"></div>

</body>
</html> 

float-css1

Hiểu rõ thuộc tính clear trong CSS

Định nghĩa: Thuộc tính clear sẽ làm mất ảnh hưởng của float.

Khi chia bố cục website bằng HTML và CSS bạn sẽ gặp phải tình trạng một box nào đó bị mất đi. Chẳng hạn như phần footer.

Float sẽ kéo phần tử sang bên trái hoặc phải, các phần tử phía sau đó cũng bị kéo theo. Vì vậy cần phải dùng tới clear để chặn lại sự ảnh hưởng đó.

<!DOCTYPE html>
<html>
<head>
<style>
.left-box {
    width: 300px;
    height: 100px;
    border: 1px solid green;
    float: left;
}
.right-box {
    width: 300px;
    height: 100px;
    border: 1px solid green;
    float: right;
}
.footer-box {
    width: 300px;
    height: 100px;
    border: 1px solid green;
    clear: both;
}
</style>
</head>
<body>

<div class="left-box"></div>
<div class="right-box"></div>
<div class="footer-box"></div>
</body>
</html> 

Cũng với ví dụ trên bây giờ bạn hãy thử xóa clear: both trong .footer-box xem sao. Lúc này box này sẽ bị trôi lên và năm bên dưới left-box.

Kết luận: clear và float là 2 thuộc tính thường gặp trong HTML và CSS. Nếu bạn là người mới chắc chắn rằng sẽ gặp khó khăn khi sử dụng. Tuy nhiên qua bài viết này bạn sẽ thấy dễ dàng hơn. Để thành thạo bạn nên thực hành chia layout với nhiều dạng khác nhau.

Leave a Reply

Your email address will not be published. Required fields are marked *