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.
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.
This is some text.
This is some text.
This is some text.
Enjoy coding!
Read also:
CSS float Property