CSS Float

The CSS float property is used to position an element to the left or right of its container. It allows surrounding content to wrap around the floated element.

• Aligns elements to the left or right and supports values such as left, right, and none.
• Allows text and other content to flow around floated elements, making it useful for image positioning.
• Works with the clear property to control the behavior of floated elements and prevent layout issues.

Syntax:

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

Property values

• none : Default value; the element does not float.
• left : Floats the element to the left, allowing content to wrap on its right side.
• right : Floats the element to the right, allowing content to wrap on its left side.
• initial : Sets the property to its default value.
• inherit : Inherits the float value from the parent element.

Examples of CSS Float

Some examples of CSS Float are discussed below:

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.

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.

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.

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.