Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 18 Apr, 2021
Geek Week

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 direction from which we want to stop an element from being floated like: left, right, top, bottom, and both.  So fix clear value to both to stop an element from being floated on the sides of a paragraph.

Syntax:

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

Example:

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
Recommended Articles
Page :