CSS clear Property

The clear property specifies which sides of floating elements are not permitted to float. It sets or returns the element's position in relation to floating objects. It will fit if the element can fit horizontally next to another floated element.

Syntax

clear: none | left | right | both | initial | inherit;

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .clearfix {
        width: 100%;
        border: 1px solid #212b36;
    }
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        visibility: hidden;
        clear: both;
    }
    .clearfix p {
        width: 150px;
        margin: 10px;
        padding: 50px 0;
        text-align: center;
        color: #ffffff;
    }
    .clearfix .red {
        float: left;
        background: #ff4842;
    }
    .clearfix .green {
        float: right;
        background: #00ab55;
    }
</style>
</head>
<body>

<div class="clearfix">
    <p class="red">Float Left</p>
    <p class="green">Float Right</p>
</div>

</body>
</html>

Preview

Property Values

Value	Description
none	Default. The element is not pushed below the floated elements on the left or right.
left	The element is pushed below the floated elements on the left.
right	The element is pushed below the floated elements on the right.
both	The element is pushed below the floated elements on the left and right.
initial	This property is set to its default value.
inherit	This property is inherited from its parent element.

Supported Browsers

Element	Chrome	Firefox	Safari	Edge / IE	Opera
clear	1.0	1.0	1.0	5.0	6.0

@charset

clip

CSS clear Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us