How to stop any element to be floated on the sides of paragraph element in CSS ?

Last Updated : 30 May, 2023

In this article, we will learn How to stop an element from being floated on the sides of a paragraph element in CSS. The clear property is used to control an element from being floated on the sides of a paragraph.

Approach: The clear property is used to control an element from being floated on the sides of a paragraph. It takes the direction from which we want to stop an element from being floated like left, right, top, bottom, and both. So fix clear values to both to stop an element from being floated on the sides of a paragraph.

Syntax:

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

Example: In this example, we use the above-explained approach.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        img {
            float: left;
        }
 
        p {
            font-size: 30px;
        }
 
        p.gfg {
            clear: top;
        }
    </style>
</head>
 
<body>
 
    <img src="gfg_stiker.png" width="100" height="150">
    <p>The image is flotted to the side of this paragraph.</p>
    <p class="gfg">
        Now image is not gonna be flotted on the
        sides of this paragraph.
    </p>
</body>
</html>