Using Css Float

Floating left

• Removes an element from the normal document flow.
• It then takes that element and pushes it to the far left as possible.
• Other element would flow far left as possible to floe around the element and takes its original space

.floatRight{
    width:200px;
    height:200px;
    float:right;
    background-color: red;
    
}

Floating right

• Removes an element from the normal document flow.
• It then takes that element and pushes it to the far right as possible.
• Other element would flow far left as possible to floe around the element and takes its original space

floatLeft{
    width:200px;
    height:200px;
    float:left;
    background-color: #ccc;
}

Floating multiple elements

We can float multiple elements together  as shown below. They would stack next to one another.

Using Clear with Float

We can use clear property to clear all the elements next to the float element. All the elements next to the float would move to the next line. If we have multiple elements with float left then we need to have the next element in the DOM to have a clear property of left