Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App
geeksforgeeks
Browser
Continue

Related Articles

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

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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>

Output:

Before applying clear property:

After applying clear property:

My Personal Notes arrow_drop_up
Last Updated : 30 May, 2023
Like Article
Save Article
Similar Reads
Related Tutorials