CSS Float (original) (raw)

Last Updated : 01 Oct, 2024

The CSS float property is used to move an element out of the normal document flow and position it to the left or right of its container. For example, **float: left moves the element to the left, and float: right moves it to the right.

Other content will wrap around the **floated element which helps to create a more **dynamic layout. Although there's no direct **float: center in CSS, you can use other methods like **margins to center elements.

**Syntax

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

**Property values

**Value **Description
**none Default value; the element does not float.
**left Element floats on the left side of the container, allowing content to flow around its right side.
**right Element floats on the right side of the container, allowing content to flow around its left side.
**initial Element is set to its default value.
**inherit The element inherits the floating property from its parent element.

We will use the above property values & understand their usage through the example.

Examples of CSS Float

**Example 1: Using CSS float: left

The **float: left; CSS property positions an element on the left side of its container, allowing content to flow around its right side.

HTML `

CSS Float
GeeksforGeeks

`

**Output:

: Using CSS float: left - output

**Example 2: Using CSS float: right

The float: right; CSS property positions an element on the right side of its container, allowing content to flow around its left side.

HTML `

CSS Float
GeeksforGeeks

`

**Output:

Using CSS float: right - outptut

**Example 3: Using CSS float: none

The float: none; CSS property resets the floating behavior of an element, causing it to not float and remain in the normal document flow.

HTML `

CSS Float
GeeksforGeeks

`

**Output:

Using CSS float: none - output

**Example 4: Using CSS float: inherit

The float: inherit; CSS property makes an element inherit the float value from its parent element, ensuring consistency with the parent's floating behavior.

HTML `

CSS Float
GeeksforGeeks

`

**Output:

Using CSS float: inherit- output

**Supported Browsers

The **CSS float property is widely supported across major browsers:

Note: These versions indicate when support for the float property was introduced. Since it's an older CSS feature, it is fully supported in all modern browsers.