CSS float property explained with examples

CSS float property

I see many Beginners feel very hard to understand the CSS float property, and many beginners think that it is little bit tricky and difficult to learn and understand. so today I’m going to break your misconception on CSS float concept.

First let me explain the advantage of CSS float concept. We can built a website layout by using
1. Tables
2. CSS Float Property
3. Flex-Box

CSS Float Property :

Float property is one of the best way to built the  website layout from scratch. and Today I’m going to discuss only about CSS floats here. CSS floats have totally 5 properties

float:left;
float:right;
clear:left;
clear:right;
clear:both;

Lets start CSS float concept step by step

CSS float property

  1. Consider the three div elements with three different classes. and each div has a different background-color, width and height properties. Without CSS float property and each div element lies one after other.
    .red   {background-color:red;width:90px;height:95px;}
    .green {background-color:green;width:100px;height:160px;}
    .blue  {background-color:blue;width:110px;height:120px;}
    

    CSS float property

  2. When red div element is given with float:left; property see what happens, green div element will overrides the red div element and blue div element will move one step ahead and occupies the green div elements space.
    .red{background-color:red;width:90px;height:95px;float:left;}

    CSS float property

  3. Then when green div element is given with float:right; property, green div element will float right side. and blue div element will overrides the red div element.
    .green {background-color:green;width:100px;height:160px;float:right;}

    CSS float property

  4. Here comes the CSS clear property, CSS clear property has clear:left; clear:right; and clear:both;
  5. Now let me explain how clear:left; property works, when blue div element is given with clear:left; property see what happens, It doesn’t overrides the red div elements area(width,height) but occupies the green div elements area(width,height).
    .blue  {background-color:blue;width:110px;height:120px;clear:left;}

    CSS float property

  6. Lets see how clear:right; and clear:both; property works, when blue div element is given with clear:right; property, It doesn’t override the red and green div elements area(width,height). Then when clear:both; property is given, see what happens Surprisingly nothing happens, because clear:both property avoids the overriding of both red and green div elements area(width,height).
    .blue  {background-color:blue;width:110px;height:120px;clear:left;}
    .blue  {background-color:blue;width:110px;height:120px;clear:both;}
    

    CSS float property

CSS float property

Here is the Demo for creating a simple single page website layout with the help of CSS float concept.

See the Pen css-float-property-explained by rajeshdn (@cool_lazyboy) on CodePen.0

Leave a Reply

Your email address will not be published. Required fields are marked *