How is Float property used in CSS?

The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).

As float implies the use of the block layout, it modifies the computed value of the display values.

The float property is specified as a single keyword, chosen from the list of values below.

  • left: The element must float on the left side of its containing block.
  • right: The element must float on the right side of its containing block.
  • none: The element must not float.
  • inline-start: The element must float on the start side of its containing block. That is the left side with ltr scripts and the right side with rtl scripts.
  • inline-end: The element must float on the end side of its containing block. That is the right side with ltr scripts, and the left side with rtl scripts.