CSS - float Property

The float Property

CSS float property controls the positioning and formatting of content on the page. It positions an element either on the right or left side of the container, letting text and other inline elements wrap around it. Absolutely positioned elements are not affected by this property.

Syntax

The syntax for the CSS float property is as follows:

float: none | left | right | initial | inherit;

Property Values

CSS float Property with none Value

To prevent the positioning of an element to the left or right of the container, we use the none value. The none value ensures that the element is not floated and remains in the normal document flow. This is shown in the following example.

Example

In this example, we have used the none value to disable the float property on the img tag .

CSS float Property with left Value

To position an element to the left of the container, we use the left value. The left value positions the element to the left with the surrounding elements wrapping around it, to prevent this wrapping we can use the clear property. This is shown in the following example.

Example

In this example, we have used the left value that floats the image in the left direction.

CSS float Property with right Value

To position an element to the left of the container, we use the right value. The right value positions the element to the right with the surrounding elements wrapping around it, to prevent this wrapping we can use the clear property. This is shown in the following example.

Example

In this example, we have used the right value that floats the image in the right direction.

Using clear Property with float Property

The float property positions elements to the left or right, due to this the surrounding elements wrap around the elements. To prevent this wrapping, we can use the clear which makes them appear below the floated elements. This is shown in the following example.

Example

In this example, we have used values of the float property with the clear property.

Supported Browsers