CSS float property specifies how and where an element should float within its container.
Using the float property, an element can float to the left or right of its parent container based on its float value.
In this CSS tutorial, we will discuss these floating techniques and the floating nature of elements in detail.
Float Left
Float Right
The float property can accept any of the following values:
- left – The element floats to the left of its parent container
- right – The element floats to the right of its parent container
- none – The element does not float at all
- inherit – The element inherits float value from its parent element
Let’s discuss each value in more detail:
CSS Float Left
If an element has a float value left, It will float to the left side of its parent container. The other elements will flow normally in the remaining space.
As you can see in the below example, first, the element having float: left; floats to the left of the container. Then, the remaining content flows normally in the available space, right to the floated element.
Example:
.left{
float: left;
background: lightgreen;
}
CSS Float Right
CSS float: right; property is used to float an element to the right side of its containing block. Other elements flow normally in the remaining space.
As you can see in the below example, first, the element having float: right; floats to the right side of the container as much as possible. Then, the remaining content flows normally in the available space left to the floated element.
Example:
.right{
float: right;
background: lightgreen;
}
CSS Float None
This is the default value of the float property. Elements having float value none do not float anywhere in the container, instead, they are displayed according to their normal flow in the layout. See the example below:
Example:
.no-float{
float: none;
background: lightgreen;
}
Content Overflow Problem
There may be a situation when the height of the floated element is more than its containing element. In such situations, the floated element overflows out of its container. See the example below:
This problem can be fixed using the overflow property. Simply set the overflow property to auto in the element’s parent container and the element will adjust automatically.
Example:
.no-overflow{
overflow: auto;
}
