Name

float

Values:

left | right | none | inherit

Initial value:

none

Applies to:

All elements.

Inherited:

No.

Computed value:

As specified.

Description:

float defines the direction in which an element is floated. This has traditionally been applied to images in order to let text flow around them, but in CSS, any element may be floated. A floated element will generate a block-level box no matter what kind of element it may be. Floated nonreplaced elements should be given an explicit width, as they otherwise tend to become as narrow as possible. Basic floating is generally supported by all browsers, especially on images, but the nature of floats can lead to unexpected results when they are used as a page layout mechanism. Use float cautiously, and thoroughly test any pages employing it.

Examples:

img.figure {float: left;}
p.sidebar {float: right; width: 15em;}

Supported by:

Firefox, Internet Explorer, Opera, Safari.

Get CSS Pocket Reference, 3rd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.