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.

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:

• clear: left
• clear: right
• clear: both
• clear: none

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

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

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

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.

• 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"

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"

• 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"

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

• 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:

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: