CSS float

The CSS float property is used for floating elements to the start or end of the float anchor's line or block.

The float property was originally defined so that authors could specify that an element would float to the left or right of other elements, or not at all.

CSS3 expands on the original float definition by allowing authors to specify how floats should work within inline boxes, columns, regions, and pages.

Syntax

CSS2.1 syntax:

CSS3 syntax:

Possible Values

CSS2.1

Here are the values as defined by CSS Level 2.1:

left
The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the clear property).
right
The element generates a block box that is floated to the right. Content flows on the left side of the box, starting at the top (subject to the clear property).
none
The box is not floated.

CSS3

The CSS Page Floats (draft) specification expands on the definition of the float property, and introduces new properties and concepts. Among them, are new values for the float property.

In particular, the spec describes floats that move to the top or bottom of content passages. The author can specify whether a float floats to align with a float reference inline box, column, region or page.

With that in mind, below are the values defined in CSS3 at the time of writing.

inline-start
The element generates a box that is floated to the line-start outer edge of the float reference. Content flows on the line-end side of the box.
inline-end
The element generates a box that is floated to the line-end outer edge of the float reference. Content flows on the line-start side of the box.
block-start

If the float reference is a line box, block-start behaves like inline-start.

If the float reference is not a line box, the element generates a box that is floated to the block-start and line-start outer edges of the float reference.

The initial value of the max-width or max-height property that refers to the inline size of the float is 100%.

Content flows on the block-end side of the box.

block-end

If the float reference is a line box, block-end behaves like inline-end.

If the float reference is not a line box, the element generates a box that is floated to the block-end and line-start outer edges of the float reference.

The initial value of the max-width or max-height property that refers to the inline size of the float is 100%.

Content flows on the block-start side of the box.

left

If the float reference is a line box, behaves like inline-start or inline-end, whichever corresponds to line-left for the float reference.

Otherwise, behaves like block-end, inline-start or inline-end depending on the float containing block's direction and writing-mode.

right

If the float reference is a line box, behaves like inline-start or inline-end, whichever corresponds to line-right for the float reference.

Otherwise, behaves like block-start, inline-start or inline-end depending on the float containing block's direction and writing-mode.

top
Behave like block-start or inline-start depending on the float containing block's direction and writing-mode.
bottom
Behave like block-end or inline-end depending on the float containing block's direction and writing-mode.
snap-block(length [, start | end | near ]?)

Makes the element float to the start or the end of the block if it naturally appears within a certain distance from either one. The length value(s) specifies the maximum distance from the start/end that an element must be within in order to be floated; one length value specifies the distance from both the start and the end, two length values specify the distance from the start and end, respectively.

The optional keyword value specifies where the element is floated: start, end, or the nearest of the two. The initial value is near.

snap-block
Same as snap-block(2em, near).
snap-inline(length [, left | right | near ]?)

Makes the element float to the line start or line end if it naturally appears within a certain distance from the start or end of the line. The length value(s) specifies the maximum distance from the start/end that an element must be within in order to be floated; one length value specifies the distance from both the start and the end, two length values specify the distance from the start and end, respectively.

The optional keyword value specifies where the element is floated: line start, line end, or the nearest of the two. The initial value is near.

snap-inline
Same as snap-inline(2em, near).
none
The box is not floated.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial
Represents the value specified as the property's initial value.
inherit
Represents the computed value of the property on the element's parent.
unset
This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

General Information

Initial Value
none
Applies To
All
Inherited?
No
Media
Visual
Animatable?
No

Example Code

Official Specifications