CSS Float: Beginner's Guide

What is float property?

float in CSS is used to position an element to left or right within its containing block ,allowing text or inline elements to flow around it .

PROPERTY VALUES:

left:

The element is floated to the left of its container.

Content flows right of the floated element.

right:

The element is floated to the right of its container.

Content flows left of the floated element.

none:

No floating

inherit:

The elements inherits value from its parent.

let’s go through it in detail:

Float is generally used for floating the text wrapping around the elements depending on the float direction.

Clearing Floats

Float can cause the layout issues especially when the parent container doesn’t contain any non-floated elements. For instance if we float multiple elements inside the container the container may collapse

<div class="container2">
    <div class="child1">This is first one</div>
    <div class="child2">This is second one</div>
    <p id="a">This is paragraph Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo libero fuga, ut unde nulla eveniet! Debitis suscipit, consequuntur itaque culpa quas exercitationem, facere velit esse consequatur corrupti reprehenderit laudantium odio.</p>
  </div>


.child1
{
    background-color: maroon;
    height:20px;
 width:100px;
 float:left;
border: 2px solid green;

}
.child2
{
    float:right;
    background-color: aquamarine;
height:40px;
width:100px;
border:2px solid yellow;

}
.container2{
    border:2px solid blue;

}

These will gives the layout issues Other elements that are not floated will behave as floated elements doesn’t exist in the normal flow unless they are positioned after it or cleared

 #a{
  clear:both;
}

What if the Floated element is taller?

The Container might not stretch to fit the height of the floated element it looks like container is collapsing.

.child
{
float:left;
background-color: bisque;
height:100px;
width:100px;


}
.container1
{
    border: 3px solid rgb(213, 93, 93);
    margin-bottom: 2px;

}

we can overcome this by Using overflow :hidden or clearfix techniques on the container.

.child
{
float:left;
background-color: bisque;
height:100px;
width:100px;


}
.container1
{
    border: 3px solid rgb(213, 93, 93);
    margin-bottom: 2px;
    overflow: hidden;
}

……………………………………………………Thank you………………………………………..

Understanding CSS Float: A Beginner's Guide