CSS Clear and Clearfix

CSS Clear and Clearfix


CSS Clear property
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;
Example - 
Output

Clearfix Property

Sometimes the floated element may be taller than the containing element in that case the element will overflow outside the boundary.

Hence we can use clearfix hack as it is called generally to resolve that problem.

Now we will see Examples - 

Example - We will see what an element without and with clearfix property will look like.

HTML -










 

 

 "en">   "stylesheet" href="sample.css">
  		"stylesheet" href="https://fonts.googleapis.com/css?family=Sofia|Audiowide|Trirong">
  		"stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">          

  		   

without clearfix



   

Below is the element without clearfix property


 

    class="one" src="krishnaimage.jpg" alt="lord krishna image" style="width:170px;height:170px;">
Lorem, ipsum dolor sit amet consectetur adipiscing elit. Quod, ducimus ratione fuga maiores eaque fugiat iste optio ut hic harum.
 


 

"clear:right">With Clearfix


 

 


 
 
class="clearfix">
    class="img2" src="krishnaimage.jpg" alt="lord krishna image" width="170" height="170">
  Lorem ipsum dolor sit amet consectetur adipiscing elit. Ab, velit aliquid id aperiam ipsum adipisci porro voluptate sequi ratione vero?
 


 

 




 

 

CSS -

Output -



 

HTML Tables