CSS float

<!doctype html>
<title>Example</title>
<style>
div {
  padding: 20px;
  width: 100px;
  border: 5px solid limegreen;
  background: gold;
  }
div.float-left { 
  float: left;
  }
div.float-right { 
  float: right;
  }
</style>
<div class="float-left">Float Left</div>
<div class="float-left">Float Left</div>
<div>No float</div>
<div class="float-right">Float Right</div>
<div>No float</div>

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

CSS Page Floats (W3C First Public Working Draft, 15 September 2015)
CSS Logical Properties Level 1 (Editor's Draft)
CSS basic box model (W3C Working Draft 9 August 2007)
CSS Level 2.1 (W3C Recommendation 07 June 2011)
CSS Level 1 (W3C Recommendation 17 Dec 1996)