Skip to main content

CSS Float Property

The float 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).

The float property can be set to one of the following values:

  • left: element will float to the left of its container.
  • right: element will float to the right of its container.
  • none: element will not float and will remain in the normal flow of the document.
  • inherit: element will inherit the float value of its parent element.

Here's an example of how to use the float property:

Editor

Loading...

In this example:

  • we have two div elements with the classes left and right.
  • Both elements have a fixed width and height and a background color.
  • left element is set to float: left, which means that it will be floated to the left of the container.
  • right element is set to float: right, which means that it will be floated to the right of the container.
  • Because both elements are floated, they are taken out of the normal flow of the document and moved to the left and right of the container.

Clearing Floats​

When an element is floated, its parent no longer contains it because the float is removed from the flow. This can cause problems with margins, borders, and backgrounds of the parent element.

To fix this, the clear property can be used to specify whether an element should be next to the floated elements or whether it should move below them.

The clear property can be set to one of the following values:

  • left: element will be moved below any floated element on the left side.
  • right: element will be moved below any floated element on the right side.
  • both: element will be moved below any floated element on either side.
  • none: element will not be moved below any floated element.
  • inherit: element will inherit the clear value of its parent element.

Here's an example of how to use the clear property:

.clear {
  clear: both;
}

In this example:

  • we have a div element with the class clear.
  • The clear class has a clear: both property, which means that it will be moved below any floated element on either side.