Thuộc tính clear trong CSS

Thuộc tính clear

Các phần tử theo sau một phần tử có thuộc tính float (left, right) nó sẽ bám theo đuôi phần tử đó. Nếu bạn muốn ngắt đuôi bạn dùng thuộc tính clear.

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

none giá trị mặc định, cho phép các phần tử bám theo cả trái, phải
left không cho bám bên trái
right không cho bám bên phải
both không cho bám cả hai bên

Ví dụ:

 <style>
    .floating {
        float: right;
    }
</style>

    This paragraph is above the div element
    and is not affected by the float right property.
    <br /><br />
    <div class="floating">
        <img src="https://xuanthulab.net/public/img/logo.png"
             style="width: 200px;"
        />
    </div>
    This paragraph comes after the div element
    and is affected by the float right property.
    <br /><br />
    This paragraph also comes after the div element
    and is affected by the float right property.
    <br /> <br />

This paragraph is above the div element and is not affected by the float right property.

This paragraph comes after the div element and is affected by the float right property.

This paragraph also comes after the div element and is affected by the float right property.

Ví dụ sử dụng thuộc tính clear: both;This paragraph is above the div element and is not affected by the float right property.

This paragraph comes after the div element and is affected by the float right property.

This paragraph is out of the floating group and is not affected by the float right property.

<style>
    .floating {
        float: right;
    }
    .clearing {
        clear: both;
    }

</style>

    This paragraph is above the div element
    and is not affected by the float right property.
    <br/><br/>
    <div class="floating">
        <img src="https://xuanthulab.net/public/img/logo.png"
             style="width: 200px; height: 150px"
        />
    </div>
    This paragraph comes after the div element
    and is affected by the float right property.
    <br/><br class="clearing"/>
    This paragraph is out of the floating group
    and is not affected by the float right property.
    <br/> <br/>