CSS float property explained with examples

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

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;}
```
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;}
```
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;}
```
Here comes the CSS clear property, CSS clear property has clear:left; clear:right; and clear:both;
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;}
```
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;}
```