How to stop any element to be floated on the sides of paragraph element in CSS ?
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: