css-clear-property

CSS clear Property


CSS clear Property
Clear property
This property specifies the placement of an element in relation to floating objects.
The clear property is directly related to floats. Property Values  -
  • none - Default. Allows floating elements on both sides
  • left - No floating elements allowed on the left side
  • right - No floating elements allowed on the right side
  • both - No floating elements allowed on either the left or the right side
  • initial - Sets this property to its default value. Read about initials.
  • inherit - Inherits this property from its parent element. Read about inherit
Syntax
Clear: value;
 
Now we will see Example -
Example - 
<!DOCTYPE html>
<html lang="en">
<style>
img {
  float: left;
  margin: 3%;
}

p.oneClear {
  clear: left;
}
</style>

<h1>With clear property</h1>

<img src="krishnaimage.jpg" alt="sample image" width="135" height="134">
     

<p class="oneClear">Thi is a sample pera here Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam eligendi culpa voluptatem hic mollitia.</p>
<br>


<h1>Without clear property</h1>

<img src="krishnaimage.jpg" alt="sample image" width="135" height="134">
     

<p class="twoClear">Thi is a sample pera here Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam eligendi culpa voluptatem hic mollitia.</p>
</body>

</html>


 
 
Output -