float - CSS: Cascading Style Sheets

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

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: If you're referring to this property from JavaScript as a member of the HTMLElement.style object, modern browsers support float, but in older browsers you have to spell it as cssFloat. This was an exception to the rule, that the name of the DOM member is the camel-case name of the hyphenated CSS name (because "float" is a reserved word in JavaScript, as seen in the need to escape "class" as "className" and escape <label>'s "for" 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.

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 |
 inline-start |
 inline-end |
 snap-block |
 <snap-block()> |
 snap-inline |
 <snap-inline()> |
 left |
 right |
 top |
 bottom |
 none |
 footnote <snap-block()> = 
 snap-block( <length> , [ start | end | near ]? )
<snap-inline()> = 
 snap-inline( <length> , [ left | right | near ]? )

Examples

How floated elements are positioned

As mentioned above, when an element is floated, it is taken out of the normal flow of the document (though still remaining part of it). It is shifted to the left, or right, until it touches the edge of its containing box, or another floated element.

In this example, there are three colored squares. Two are floated left, and one is floated right. Note that the second "left" square is placed to the right of the first. Additional squares would continue to stack to the right, until they filled the containing box, after which they would wrap to the next line.

HTML

html

<section> <div class="left">1</div> <div class="left">2</div> <div class="right">3</div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tristique sapien ac erat tincidunt, sit amet dignissim lectus vulputate. Donec id iaculis velit. Aliquam vel malesuada erat. Praesent non magna ac massa aliquet tincidunt vel in massa. Phasellus feugiat est vel leo finibus congue. </p></section>

CSS

css

section { box-sizing: border-box; border: 1px solid blue; width: 100%; float: left;}div { margin: 5px; width: 50px; height: 150px;}.left { float: left; background: pink;}.right { float: right; background: cyan;}

Result

Clearing floats

Sometimes you may want to force an item to move below any floated elements. For instance, you may want paragraphs to remain adjacent to floats, but force headings to be on their own line. See clear for examples.

Specifications

Specification
Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # propdef-float
CSS Logical Properties and Values Level 1 # float-clear

Browser compatibility

BCD tables only load in the browser

float - CSS: Cascading Style Sheets | MDN (2024)