Thuộc tính clear trong CSS

Thuộc tính clear trong CSS

Thuộc tính được sử dụng để xóa bỏ ảnh hướng của float trên cạnh trái, cạnh phải hoặc cả hai của box phần tử. Thuộc tính này liên quan trực tiếp đến thuộc tính float (nên cần nắm rõ thuộc tính float trước).

Cú pháp:

clear: none | left | right | both | inherit

Thuộc tính clear nhận giá trị:

• none giá trị mặc định, phần tử giữ ảnh hưởng của float
• left bỏ đi ảnh hưởng của float ở biên trái, phần từ phía bên trái sẽ bị dịch xuống dưới
• right bỏ đi ảnh hưởng của float ở biên phải
• both bỏ đi ảnh hưởng của float ở cả hai biên (phần tử phía sau dịch xuống dưới)

Ví dụ:

<style>
    .floating {
        float: left;
        background: red;
    }

</style>

<div style="border: 1px dashed red; padding: 10px">
    <div class="floating">
        <img src="https://xuanthulab.net/public/img/logo.png"
             style="width: 150px; height: auto"
        />
    </div>
    <p>Đây là nội dung khác sau <strong>phần tử float</strong>,
    nó sẽ bám theo phần tử float.</p>
</div>

Kết quả là:

Đây là nội dung khác sau phần tử float, nó sẽ bám theo phần tử float.

Ta thấy phần tử p, nội dung của nó đi sau phần tử có float (phần tử có class floating - left), tiếp xúc với phần tử đó ở phía trái.

Nếu bạn muốn bỏ sự ảnh hưởng của float, phần tử p sẽ bị đẩy xuống dòng mới, thì nó cần có thuộc tính clear với giá trị left

<style>
    .floating {
        float: left;
        background: red;
    }
    .clear-left {
        clear: left;
    }

</style>

<div style="border: 1px dashed red; padding: 10px">
    <div class="floating">
        <img src="https://xuanthulab.net/public/img/logo.png"
             style="width: 150px; height: auto"
        />
    </div>
    <p class="clear-left">Đây là nội dung khác sau <strong>phần tử float</strong>,
    nó sẽ bám theo phần tử float.</p>
</div>

Kết quả là:

Đây là nội dung khác sau phần tử float, nó sẽ bám theo phần tử float.

Phần tử p đã không bám theo phần tử float nữa.

clearfix

Tương tự như vậy, để thuận tiện trong trình bày bố cục, thường xây dựng một lớp css nó loại bỏ float cả hai phía.

.clearfix {
    clear: both;
}

Hãy xem layout sau:

<style>
.floatleft {
    float: left;
}
.clearfix {
    clear: both;
}
.header {
    border: 1px solid red;
    width: 100%;
}
.main-article {
    width: 60%;
    height: 300px;
    border: 1px solid blue;
}
.sidebar-post {
    width: 40%;
    height: 200px;
    border: 1px solid green;
}

.footer-page {
    border: 1px solid black;
}

</style>

<div class="header">ĐÂY LÀ HEADER</div>
<div class="main-article floatleft">Đây là phần nội dung</div>
<div class="sidebar-post floatleft">Đây là phần sidebar</div>
<div class="footer-page">Đây là phần Footer</div>

Kết quả là:

Phần Footer nó ở vị trí không mong muốn, nếu chiều cao phần main nhỏ thì do sự dàn trang có thể dẫn tới vị trí đúng yêu cầu (bạn thử thay đổi chiều cao phần main). Tuy nhiên, để đảm bảo phần footer luôn nằm dưới main và sidebar, bạn chỉ việc cho vào thuộc tính clear. Viết lại:

<div class="header">ĐÂY LÀ HEADER</div>
<div class="main-article floatleft">Đây là phần nội dung</div>
<div class="sidebar-post floatleft">Đây là phần sidebar</div>
<div class="footer-page clearfix">Đây là phần Footer</div>

Kết quả layout luôn như mong muốn