CSS Clear: Tắt Float với thuộc tính clear

Chúng ta có thể sử dụng thuộc tính CSS clear để chỉ định phía của phần tử trôi nổi (floated element) nào sẽ được xóa nội dung trôi chảy (flowing content).

Các giá trị của clear

• none — Mặc định, cho phép phần tử trôi nổi ở cả hai bên
• left — Xóa float bên trái, phần tử sẽ xuống dòng dưới phần tử float trái
• right — Xóa float bên phải, phần tử sẽ xuống dòng dưới phần tử float phải
• both — Xóa float cả hai bên, phần tử sẽ xuống dòng dưới tất cả phần tử float
• inherit — Kế thừa giá trị clear từ phần tử cha

Ví dụ 1: Sử dụng clear:left

<!DOCTYPE html>
<html>
<head>
<title>CSS Clear</title>
<style type="text/css">
.clear { clear: left; }
.yellow { background-color: #FF8A00; }
.red { background-color: #F44336; }
.green { background-color: #4CAF50; }
p {
    float: left;
    margin: 10px;
    padding: 10px;
    color: white;
}
</style>
</head>
<body>
<p class="red">Important Notice</p>
<p class="clear red">Important Notice</p>
<p class="yellow">Mediocre Notice</p>
<p class="green">Ignorable Notice</p>
</body>
</html>

Kết quả: Đoạn văn thứ 2 có class clear sẽ xuống dòng dưới đoạn văn đầu tiên (float:left), thay vì trôi nổi cạnh nó.

Ví dụ 2: Sử dụng clear:both kết hợp float:none

<!DOCTYPE html>
<html>
<head>
<title>CSS Clear</title>
<style type="text/css">
p {
    float: left;
    margin: 10px;
    padding: 10px;
    color: white;
    background-color: #48C9B0;
    border: 4px solid #145A32;
}
p.noneFloat {
    float: none;
    clear: both;
    color: #34495E;
}
</style>
</head>
</body>
<p>I am okay with shared space</p>
<p class="noneFloat">I want a private space</p>
<p>I am also okay with shared space</p>
<p>Me too</p>
</body>
</html>

Kết quả: Đoạn văn có class noneFloat sẽ không float, xóa cả hai bên float, và hiển thị trên một dòng riêng biệt, ngăn chặn các phần tử float tiếp theo trôi nổi cạnh nó.

Ứng dụng thực tế: Clearfix

Kỹ thuật phổ biến để chứa các phần tử float trong container:

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

Áp dụng class clearfix cho container cha để nó bao quanh đúng chiều cao các phần tử float con.