Float CSS Property

Posted By: Kanika Gupta Published: 14, Jan 2024

Float is yet another important property of CSS used for specifying the position of contents of a webpage. As the name suggests, floating an element means moving an element to the desired position while allowing other elements to wrap around it.

This property is most commonly used to wrap text around images or any inline elements including paragraph, list, button or table.

Values of float property

The most common parameters/values used for this property are

• Left
• Right
• None
• Initial

Syntax

float: value;

float: left

This property is used to position elements on the left side of the webpage.

Example:



Output:



float: right

This property is used to position elements on the left side of the webpage.

Example:



Output:




float: none

This property is used to set the floating property of an element to none. The element will not float and will be displayed according to the default value i.e. from left to right.

Example:




Output:




float: initial

This property is used to position an element to its initial value.

Example:

The element is at first floated to right.




Output:




The element is now floated to its initial value – left.




Output: