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:

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.

.box-left {
    float: left;
}

CSS float right

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

.box-right {
    float: right;
}

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.

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