CSS Float Property


The CSS float property is used to place an element on the left or right side of its container, and allow text and inline elements to wrap around it.

Once an element is floated, it is removed from the normal flow of the page, and other elements will flow around it.

It is used to push HTML elements or containers left or right or to create a text wrapping effect around an image.


Float Property Values

You can set the float property to one of the following values:

ValueDescription
leftFloats the element to the left side of its container.
rightFloats the element to the right side of its container.
noneDefault value. The element does not float.
inheritSpecifies that the value of the float property should be inherited from the parent element.
inline-startFloats the element to the left side of its container in left-to-right text, or to the right side in right-to-left text.
inline-endFloats the element to the right side of its container in left-to-right text, or to the left side in right-to-left text.
CSS float property example
Floating Element
Change the float property from the options above and see the result.

CSS float left

The float property with the value left is used to float an element to the left side of its container.

The element having property float: left is pushed left to the container or to the nearest floated element.

Example

.box-left {
    float: left;
}
Try it

CSS float right

The element having property float:right; is pushed right to the container or to the nearest floated element.

Example

.box-right {
    float: right;
}
Try it

Note: The default value of the float property is none to keep the element in the normal flow of the page.

CSS clear property

The clear property is used to specify whether an element can be next to floating elements that precede it or must be moved down (cleared) below them.

It is used to control the element which will float beside the floating element.

If we specify value clear: left then no floating element will be allowed to the left side of the element.

If we specify value clear: right then no floating element will be allowed to the right side of the element.

Example

.float-left{
    float: left;
    border: 1px solid brown;
}
.clear{
    clear: left;
    border: 1px solid silver;
}
Try it