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 a 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 advantages of CSS float concept. We can build an entire website’s layout by using
1. Tables
2. CSS Float Property
3. Flex-Box

CSS Float Property:

Float property is one of the best ways to build the website’s layout from scratch. and Here I’m going to explain about CSS floats only. 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

Author: Rajesh DN

Rajesh Dn is a UI developer at TCS. he likes exploring new technologies and likes hanging with friends and surfing youtube in his spare time.

Leave a Reply

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