Categories
CSS HTML Web development

CSS clear Property

CSS clear Property

The CSS clear property run the flow next to floated elements.

The CSS clear property defines what should happen with the element that is next to a floating element.

Demo:

Syntax:

clear: none|left|right|both;

none (default) – the element is not shoved below left or right floated elements.

left – the element is shoved below left floated elements.

right – the element is shoved below right floated elements

both – the element is shoved below both left and right floated elements.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
img {
  float: left;
}

#clearOne {
  clear: left;
}
</style>
</head>
<body>

<div class="ex-1">
    <h4>with clear:</h4>
<img src="https://i0.wp.com/lenadesign.org/wp-content/uploads/2021/10/css-clock-animation.jpg?ssl=1&resize=320%2C320" width="auto" height="120";>
    
<div id="clearOne" style="font-size: 25px;">This is some text.<br>This is some text.<br>This is some text.<br>This is some text.</div>
    </div>
    <br>
    <div class="ex-2">
    <h4>without clear:</h4>
<img src="https://i0.wp.com/lenadesign.org/wp-content/uploads/2021/10/css-clock-animation.jpg?ssl=1&resize=320%2C320" width="auto" height="120";>
    
<div id="clearTwo" style="font-size: 25px;">This is some text.<br>This is some text.<br>This is some text.<br>This is some text.</div>
    </div>

</body>
</html>

Output:

with clear:

This is some text.
This is some text.
This is some text.
This is some text.

without clear:

This is some text.
This is some text.
This is some text.
This is some text.

Enjoy coding!

Read also:

CSS text-align Property

CSS float Property

CSS Float Tutorial