float

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

* Some parts of this feature may have varying levels of support.

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

Try it

float: none;

float: left;

float: right;

float: inline-start;

float: inline-end;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">Float me</div>
    As much mud in the streets as if the waters had but newly retired from the
    face of the earth, and it would not be wonderful to meet a Megalosaurus,
    forty feet long or so, waddling like an elephantine lizard up Holborn Hill.
  </div>
</section>

.example-container {
  border: 1px solid #c5c5c5;
  padding: 0.75em;
  text-align: left;
  width: 80%;
  line-height: normal;
}

#example-element {
  border: solid 10px #efac09;
  background-color: #040d46;
  color: white;
  padding: 1em;
  width: 40%;
}

A floating element is one where the computed value of float is not none.

As float implies the use of the block layout, it modifies the computed value of the display values, in some cases:

Specified value	Computed value
`inline`	`block`
`inline-block`	`block`
`inline-table`	`table`
`table-row`	`block`
`table-row-group`	`block`
`table-column`	`block`
`table-column-group`	`block`
`table-cell`	`block`
`table-caption`	`block`
`table-header-group`	`block`
`table-footer-group`	`block`
`inline-flex`	`flex`
`inline-grid`	`grid`
other	unchanged

Note: When accessing a CSS property in JavaScript through the HTMLElement.style object, single-word property names are used as is. Although float is a reserved keyword in JavaScript, the CSS float property is accessed as float in modern browsers. In older browsers, you must use cssFloat to access the float property. (This is similar to how the "class" attribute is accessed as "className" and the "for" attribute of a <label> element is accessed as "htmlFor".)

Syntax

css

/* Keyword values */
float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;

/* Global values */
float: inherit;
float: initial;
float: revert;
float: revert-layer;
float: unset;

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

Values

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.

Formal definition

Initial value	`none`
Applies to	all elements, but has no effect if the value of `display` is `none`.
Inherited	no
Computed value	as specified
Animation type	discrete

Formal syntax

float = 
  block-start      |
  block-end