Float - Property CSS

float

Summary of characteristics of the `float` property

Quick description

Float defines the elements that can be placed side by side horizontally, or more generally along the length of a line.

Status

Standard

Usable for

HTML

Predefined values

Percentages

Not applicable.

Initial value

none

Inherited by default

No.

Animation type

Not animable : the float property cannot be animated.

W3C Module

CSS Page Floats

References (W3C)

🡇

🡅

CSS Page Floats Level 3

Document status: WD (Working Draft)

CSS Logical Properties and Values Level 1

Document status: WD (Working Draft)

Cascading Style Sheets Level 2 - Revision 1 Specification

Document status: REC (Recommendation)

Cascading Style Sheets specification - Version 1

Document status: DEPR (Old specification, declared obsolete or superseded)

Syntax diagram of `float`.

Syntax diagram of the float property.
The links in the diagram provide access to more details.
Download the diagram in SVG.

Description of the `float` property.

The definition of the float property is changing: in the past (and still today) floating elements can be at the beginning or end of the line, but the new specification provides that elements must be floating at the beginning or end of the block.

This page will be updated soon to reflect these changes.

float defines the elements that can be placed side by side horizontally. In the basic operation, each new block is positioned below the previous block. When an element is declared floating, the following elements can be placed to the left or the right to it.

It is often necessary to set the width of the floating element so that it does not take up the full width of its parent, which would prevent the following elements to sit next to him.

Some of the following may not want to be around the floating element. They can manage it with the clear CSS property.

Since the level 3 of the specification, layouts in the form of columns or tables are much easier to manage with the columns property, flex-box or grids. So reserve float for what it was intended for, i.e. the wrapping of an element: the text that bypasses the element.

The small drawings below illustrate these different types of layouts.

Layout with floating elements.

Columnar layout (journal type).

Layout with flex-box or grid.

Interactions with other properties.

When set to something other than none, the float property forces the value of the display property to block.

float has an effect only if the position property is set to static, relative, or sticky. With absolute or relative values, the float property has no effect.

Special case of a floating element that is higher than the text.

The height of floating elements is not taken into account for the calculation of the height of the container. This can cause rather unsightly results.

The floating image on the left is taller than the accompanying text : the image overflows the frame.

The effect is even more noticeable (and more annoying) when several floating elements follow each other.

Because then the next floating elements may come to be placed next to the previous floating element.

To avoid this unsightly result, simply apply the overflow:auto property to the block. This technique is known as clearfix.

About this, see also the display property with the value flow-root.

What's new for `float`.

The recent standard adds new capabilities to float:

Acceptance of inline-start and inline-end logical values rather than left or right.
A new property: float-reference which allows you to define in relation to what the floating element should be positioned (the column, the page, etc.).

Language support.

The inline-start and inline-end values are defined in relation to the direction of writing: left to right for Latin languages, or right to left for Arable languages. Other languages such as Hebrew or CJK also have a particular writing style.

left

The direction and writing mode of this text adapt to the chosen language.

right

Values for `float`.

float: none;

Default. Non-floating element: The following elements are positioned below it.
float: left; float: right;

left: the element is floating on the left. The following items can be placed on its right, if there is enough space left.

right: the element is floating on the right. The following items can be placed on its left, if the remaining space is sufficient.
float: inline-start; float: inline-end;

inline-start: The element is floating at the beginning of the lines, given the writing direction. For European languages that are written from left to right, this value is equivalent to left.

inline-end: The element is floating at the end of the lines, given the direction of writing. For European languages that are written from left to right, this value is equivalent to right.
float: block-start; ⚠ float: block-end; ⚠

If the element is of type inline, block-start and block-end behave as inline-start respectively and inline-end.
If the reference is an element of the type inline, a box is generated that is floating.

See also float-reference which defines the reference.
float: snap-inline(d); ⚠ float: snap-block(d); ⚠

Defines a distance from which the floating object should position itself from its normal position.
If the d parameter is not specified, its default value is 2em.

⚠ These two values are still poorly defined, and are not supported by any browser (2024).

Common values:


float: initial  (none)
float: inherit
float: revert
float: revertLayer
float: unset

These values are described in more detail on their respective page: initial, inherit, revert, revert-layer, unset.

Example of use of `float`.

It's easy to format drop caps with CSS, by floating the ::first-letter pseudo-element.

The initial letter is often in a fancy font, always in a larger size than the text. It is usually the first letter of a chapter. The first word or line of the paragraph is often in small capitals. Note: To put the first word in small caps, we would have to insert a span tag to delimit it because the ::first-word pseudo-element still doesn't exist in CSS.

Less used today, initials adorned ancient manuscripts, particularly in the Middle Ages, when books were copied by monks who took the time to make superb illuminations on the initials.

We have not planned an illumination, but it is easy to find a fancy font. Here it is the Berkshire Swash police of Google Fonts.

Changing the `float` Property programmatically.

Float an element with Javascript.

There are two Javascript syntaxes that allow you to change the value of the float property. The first uses the typical CSS notation, with a hyphen to separate the words (kebab-case); the second uses a notation more common in Javascript: a capital letter to separate words (camel-case).


	let el = document.getElementById('id');
	el.style['float'] = 'left';
	// or
	let el = document.getElementById('id');
	el.style.float = 'left';

Read in Javascript the value of `float`.

When the float property has been assigned via the element's style attribute, this code is used to return the value. If the property was initialized via a CSS selector, use the next code instead, which returns the calculated value.


	let el = document.getElementById('id');
	let value = el.style['float'];
	// or
	let el = document.getElementById('id');
	let value = el.style.float;

Read the computed value of `float` in Javascript.

The computed value can be the value assigned to the property directly on this element (via its style attribute or via a CSS selector), an inherited value, or the initial value of the property, which is none for float.


	let el = document.getElementById('id');
	let value = window.getComputedStyle(el).getPropertyValue('float');

Change the value of the `float` property with JQuery.


 $('#id').css('float', 'left');

Read the computed value of the `float` property with JQuery.


	let value = $('#id').css('float');

Test it yourself.

The buttons below apply the entered value to the float property and then display either the value as applied, or the calculated value.

Browsers compatibility.

The float property is well supported by all current browsers, at least with the recommendations of the CSS 2.1 specification.
However, there are compatibility issues when float is used with the new values recommended in version 3 of the CSS Page Floats.

Column 1

Support for the float property in CSS 2.1 syntax, i.e. with the values left, right, inline-start and inline-end.

Column 2

Support for logical values for float, i.e. inline-start and inline-end.

float
property

Logical
values

Estimated overall support.

97%

93%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Historic of the `float` property.

Cascading Style Sheets specification - Version 1

The float property has existed since the very first CSS language specification.

November 17, 1995
Working Draft.
November 12, 1996
Proposed for recommendation.
December 17, 1996
Recommendation .
September 13, 2018
Old specification, declared obsolete.
Cascading Style Sheets Level 2 - Revision 1 Specification

The inherit value is accepted for the float property.

November 04, 1997
Working Draft.
March 24, 1998
Proposed for recommendation.
May 11, 1998
Recommendation .
CSS Logical Properties and Values Level 1

Additional details on logical values (depending on the writing mode).

May 18, 2017
Working Draft.
CSS Page Floats Level 3

New values are authorized with the float property, to take into account the vertical writing mode: top, bottom, etc.
On the other hand, logical values (according to the writing mode depending on the language) are also accepted: inline-start, block-start , etc.

September 15, 2015
Working Draft.