Definition and Usage
The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it. A floating element is one where the computed value of float is not none.
- Initialnone
- Applies toall elements, but has no effect if the value of display is none.
- Inheritedno
- Mediavisual
- Computed Valueas specified
- Animatableno
- Canonical orderthe unique non-ambiguous order defined by the formal grammar
As float implicitly implies the use of the block layout, it modifies the computed value of the display values in some cases:
| Specified value |
Computed value |
inline |
block |
inline-block |
block |
inline-table |
table |
table-row |
block |
table-row-group |
block |
table-column |
block |
table-column-group |
block |
table-cell |
block |
table-caption |
block |
table-header-group |
block |
table-footer-group |
block |
flex |
flex, but float has no effect on such elements |
inline-flex |
inline-flex, but float has no effect on such elements |
| other |
unchanged |
Syntax
Formal syntax: left | right | none
float: left
float: right
float: none
float: inherit
Values
- left
- Is a keyword indicating that the element must float on the left side of its containing block.
- right
- Is a keyword indicating that the element must float on the right side of its containing block.
- none
- Is a keyword indicating that the element must not float.
Examples
01 |
<style type="text/css"> |
02 |
div { border: solid red; max-width: 70ex; } |
03 |
h4 { float: left; margin: 0; } |
07 |
This is some text. This is some text. This is some text. |
08 |
This is some text. This is some text. This is some text. |
09 |
This is some text. This is some text. This is some text. |
10 |
This is some text. This is some text. This is some text. |
HELLO! This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
How floats are positioned
As mentioned above, when an element is floated it is taken out of the normal flow of the document. It is shifted to the left or right until it touches the edge of it’s containing box or another floated element.In the image below, there are three red squares. Two are floated left and one is floated right. Note that the second “left” red square is placed to the right of the first. Additional squares would continue to stack to the right until they filled the containing box, after which they would wrap to the next line.
Compatibility
Desktop browsers
| Feature |
Chrome |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari |
| Basic support |
1.0 |
1.0 (1.7 or earlier) |
4.0 |
7.0 |
1.0 |
Mobile browsers
| Feature |
Android |
Firefox Mobile (Gecko) |
IE Phone |
Opera Mobile |
Safari Mobile |
| Basic support |
1.0 |
1.0 (1) |
6.0 |
6.0 |
1.0 |
