clear

Bạn đã học và nắm rõ thuộc tính float chưa? nếu chưa nắm được thuộc tính float bạn sẽ rất khó hình dung được nội dung bài học này, nếu chưa thì hãy xem lại thuộc tính float trước khi chúng ta bắt đầu.

Định nghĩa

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 (với thành phần B là thành phần sử dụng float).

Thuộc tính clear có các giá trị sau:

Chuẩn bị

Tạo file HTML và CSS có cấu trúc thư mục và nội dung như sau:

Cấu trúc thư mục

  • Html

    • index.html
    • css

      • style.css

Click vào dấu [+] để xem cấu trúc.

HTML viết

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="utf-8" />
<title>Tiêu đề trang web</title>
<link href="css/style.css" rel="stylesheet" media="screen,print" />
</head>

<body>
<div>
<p class="first">Thành phần A.</p>
<p class="second">Thành phần B.</p>
<p class="third">Thành phần C.</p>
</div>
</body>
</html>

Hiển thị trình duyệt khi chưa có CSS

Thành phần A.

Thành phần B.

Thành phần C.

CSS

Để dễ hình dung thuộc tính clear, ta sẽ cho thành phần <div> và 3 thành phần <p> có nội dung như sau, với chỉ mỗi Thành phần A có sử dụng float:

* {
    margin: 0;
    padding: 0;
}

div {
    border: 1px solid red;
}

p.first {
    background: #f3f3cf;
    float: left;
    height: 100px;
}

p.second {
    background: #e0e0fc;
    height: 100px;
}

p.third {
    background: #befcc9;
    height: 100px;
}

Hiển thị trình duyệt khi chưa sử dụng clear

Thành phần A.

Thành phần B.

Thành phần C.

Do Thành phần A có sử dụng float nên nếu còn vùng không gian trống, Thành phần B liền kề nó sẽ lập tức chiếm chỗ, chính vì vậy mà ta có giao diện như trên.

Download phần chuẩn bị

Tới đây ta đã xong bước chuẩn bị, bắt đầu thôi.

clear: left;

  • Thuộc tính clear: left; ngăn chặn thành phần B chiếm chỗ thành phần A, khi thành phần A có sử dụng float: left;.
  • Thuộc tính clear: left; không có tác dụng khi thành phần A sử dụng float: right;.

Ta thêm nội dung clear: left; cho thành phần B:

* {
    margin: 0;
    padding: 0;
}

div {
    border: 1px solid red;
}

p.first {
    background: #f3f3cf;
    float: left;
    height: 100px;
}

p.second {
    background: #e0e0fc;
    clear: left;
    height: 100px;
}

p.third {
    background: #befcc9;
    height: 100px;
}

Hiển thị trình duyệt khi sử dụng clear: left cho "Thành phần B"

Thành phần A.

Thành phần B.

Thành phần C.

clear: right

Cách sử dụng clear: right; tương tự như clear: left;.

  • Thuộc tính clear: right; ngăn chặn thành phần B chiếm chỗ thành phần A, khi thành phần A có sử dụng float: right;.
  • Thuộc tính clear: right; không có tác dụng khi thành phần A sử dụng float: left;.

Ta thêm nội dung clear: right; cho thành phần B và float: right cho thành phần A:

* {
    margin: 0;
    padding: 0;
}

div {
    border: 1px solid red;
}

p.first {
    background: #f3f3cf;
    float: right;
    height: 100px;
}

p.second {
    background: #e0e0fc;
    clear: right;
    height: 100px;
}

p.third {
    background: #befcc9;
    height: 100px;
}

Hiển thị trình duyệt khi sử dụng clear: right; cho "Thành phần B"

Thành phần A.

Thành phần B.

Thành phần C.

clear: both

  • Khi cả 2 thành phần A và thành phần B sử dụng float, chúng ta không thể sử dụng clear: left; hay clear: right; để ngăn chặn thành phần C chiếm vùng không gian còn trống, trong trường hợp này ta sử dụng thuộc tính clear: both; để ngăn chặn sự chiếm vùng của thành phần C.
  • Thuộc tính clear: both; có thể ngăn chặn sự chiếm vùng không gian cả khi chỉ có một thành phần sử dụng float (left hoặc right) hoặc nhiều thành phần sử dụng float.

Giả sử thành phần A và thành phần B đều sử dụng float:

* {
    margin: 0;
    padding: 0;
}

div {
    border: 1px solid red;
}

p.first {
    background: #f3f3cf;
    float: left;
    height: 100px;
}

p.second {
    background: #e0e0fc;
    float: right;
    height: 100px;
}

p.third {
    background: #befcc9;
    height: 100px;
}

Hiển thị trình duyệt khi chưa sử dụng clear: both; cho "Thành phần C"

Thành phần A.

Thành phần B.

Thành phần C.

Sử dụng clear: both; cho thành phần C ta có:

* {
    margin: 0;
    padding: 0;
}

div {
    border: 1px solid red;
}

p.first {
    background: #f3f3cf;
    float: left;
    height: 100px;
}

p.second {
    background: #e0e0fc;
    float: right;
    height: 100px;
}

p.third {
    background: #befcc9;
    clear: both;
    height: 100px;
}

Hiển thị trình duyệt khi chưa sử dụng clear: both; cho thành phần C

Thành phần A.

Thành phần B.

Thành phần C.

clear: none

  • Thuộc tính clear: none; là dạng phục hồi khi Thành phần sử dụng thuộc tính clear.

Giả sử thành phần A và thành phần B đều sử dụng float, và thành phần C sử dụng clear: both; ta có:

* {
    margin: 0;
    padding: 0;
}

div {
    border: 1px solid red;
}

p.first {
    background: #f3f3cf;
    float: left;
    height: 100px;
}

p.second {
    background: #e0e0fc;
    float: right;
    height: 100px;
}

p.third {
    background: #befcc9;
    clear: both;
    height: 100px;
}

Hiển thị trình duyệt:

Thành phần A.

Thành phần B.

Thành phần C.

Phục hồi clear bằng cách sử dụng thuộc tính clear: none;:

* {
    margin: 0;
    padding: 0;
}

div {
    border: 1px solid red;
}

p.first {
    background: #f3f3cf;
    float: left;
    height: 100px;
}

p.second {
    background: #e0e0fc;
    float: right;
    height: 100px;
}

p.third {
    background: #befcc9;
    clear: both;
    clear: none;
    height: 100px;
}

Hiển thị trình duyệt khi sử dụng clear: both; cho thành phần C:

Thành phần A.

Thành phần B.

Thành phần C.