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
none | inline-start | inline-end | left | right | block-start | block-end | bottom | top | snap-inline | snap-block
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)
 🡇  
 🡅  
Document status: WD (Working Draft)
Document status: WD (Working Draft)
Document status: REC (Recommendation)
Document status: DEPR (Old specification, declared obsolete or superseded)

Syntax diagram of float.

Float property - Syntax diagramSyntax diagram of the float CSS property. See stylescss.free.fr for details. none none left left right right inline-start inline-start inline-end inline-end block-start block-start block-end block-end snap-block(d) snap-block(d) snap-inline(d) snap-inline(d)float:;float:;
Syntax diagram of the float property.
The links in the diagram provide more details about the values.
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.
Layout with floating elements
Columnar layout (journal type).
Columnar layout
Layout with flex-box or grid.
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.

Example without clearfix

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

Several successive floating elements

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

Several successive floating elements

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

 

Example with clearfix

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

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

Examples with the float property.

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.

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

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

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

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

Change the value of the float property with JQuery.

JQuery

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

Read the computed value of the float property with JQuery.

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.

Simulator.

Writing mode:
float :
Float image
The floating elements were meant to be used to extract small pieces of content and leave the rest text wrap around them. They were not intended to be used for the main content of a page, nor were they designed for it. Nevertheless, the use of floating elements for the main content of a page is quite common today. The misuse of floating elements is now considered harmful. (1)

(1) David Baron, member of the W3C CSS Working Group.

Browsers compatibility with float.

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.
1
float
property
2
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
Caniuse

Historic of the float property.

  • Cascading Style Sheets specification - Version 1

    The float property has existed since the very first CSS language specification.
    WD
    November 17, 1995
    Working Draft.
    PR
    November 12, 1996
    Proposed for recommendation.
    REC
    December 17, 1996
    Recommendation .
    DEPR
    September 13, 2018
    Old specification, declared obsolete.

  • Cascading Style Sheets Level 2 - Revision 1 Specification

    The inherit value is accepted for the float property.
    WD
    November 04, 1997
    Working Draft.
    PR
    March 24, 1998
    Proposed for recommendation.
    REC
    May 11, 1998
    Recommendation .

  • CSS Logical Properties and Values Level 1

    Additional details on logical values (depending on the writing mode).
    WD
    May 18, 2017
    Working Draft.
    CR
    PR
    REC

  • 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.
    WD
    September 15, 2015
    Working Draft.
    CR
    PR
    REC

See also, about floating elements.

The notion of floating elements has been around for a long time, and has been described in many specifications. The most current definitions can be found in the CSS Page Floats.

Properties:

clear
Langue française
Allows or prohibits the float of the elements.