We will learn about the floating property in CSS today.

Float is used to make block elements act as inline elements or you can say that float property converts block elements to inline elements.

So in simple words using float will make a element to take only required amount of space.

You will be more clear about the concept after seeing the implementation.

Steps Invovled :

Step 1 : create a html structure for your file.

Step 2 : Write the following code inside the style tag.

Screenshot from 2020-11-09 19-40-50.png

Step 3 : Run the file and see the result.

Screenshot from 2020-11-09 19-41-11.png

Full Code :

     <!DOCTYPLE HTML>
 <html>
<head>
<meta charset="utf-8">
    <title>FLOATinG</title>
<style>
    .bluebox{
        color: floralwhite;
        height: 50px;
        background-color: #3B5998;
        width: auto;
        text-align: center;
        float: left;
    } .boxliliput{
        color: palegreen;
        height: 250px;
        background-color: #232A34;
        float: right;
        
    } .brownbox{
        color: black;
        height: 50px;
        background-color:  #B49569;
        
        
    }
    .substyling{color: red;
    background-color: bisque;
    }

</style>
</head>
<body>
    <div class="bluebox">
        <p>  <b> FAkEbOOk </b>                                        </p>
    </div>
<div class="boxliliput">
<p> <b>DESCRITION :</b>    </p> 
    <p col> facebook to sab use karte ,<span class="substyling">fakebook use kro aish karo.... DESCRIPTION ki kya zrurt 
   he!!!</span></p>
    </div>
    <div class="brownbox">
    <p>Alread a Member than what are you doing here....!</p>
    </div>
    



    </body>
    </html>

Explanation :
float:left; // will move the element to the left side.
float: right // move the element to the right

In our case the space between the two divs works as a empty space for a element so thats why our last div is in the centre.
The first two divs are working as inline elements now.

Thank You and write your queries in the comment below.

FLOATING PROPERTY IN CSS ( CSS Tutorial #18)

Steps Invovled :

Link For Previous Tutorials