CSS Float
The CSS float property is used for positioning elements by pushing them to the left or right, allowing other elements to wrap around them. It is commonly used for images and layouts.
Float only works horizontally, so elements can only be floated left or right, not up or down.
The possible values for the float property are:
Value |
Description |
none |
It specifies that the element is not floated, and will be displayed just where it occurs in the text. this is a default value. |
left |
It is used to float the element to the left. |
right |
It is used to float the element to the right. |
initial |
It sets the property to its initial value. |
inherit |
It is used to inherit this property from its parent element. |
Input:-
Output:-
How Elements Float
When an element is floated, it is taken out of the normal flow and shifted to the left or right as far as possible within its containing element. Other elements flow around the floated item unless they are prevented from doing so by their clear property.
Input:-
Output:-
Turning off Float Using Clear Property
To turn off float for an element, the clear property can be used to specify which sides of the element's box other floating elements are not allowed. This allows elements that come after the floating element to flow around it.
Input:-
Output:-
Note:- The clear property only clears the element from floated boxes within the same block and does not clear the element from floated child boxes within itself.