The float
CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).
A floating element is one where the computed value of float
is not none
.
As float
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 |
element.style
object, you have to spell it as cssFloat
. Also note that Internet Explorer versions 8 and older used styleFloat
. This is an exception to the rule, that the name of the DOM member is the camel-case name of the dash-separated CSS name (due to the fact that "float" is a reserved word in JavaScript, as seen in the need to escape "class" as "className" and escape <label>'s "for" as "htmlFor")./* Keyword values */ float: left; float: right; float: none; float: inline-start; float: inline-end; /* Global values */ float: inherit; float: initial; float: unset;
The float
property is specified as a single keyword, chosen from the list of values below.
left
right
none
inline-start
inline-end
left | right | none | inline-start | inline-end
As mentioned above, when an element is floated, it is taken out of the normal flow of the document (though still remaining part of it). It is shifted to the left, or right, until it touches the edge of its containing box, or another floated element.
In this example, there are three colored squares. Two are floated left, and one is floated right. Note that the second "left" 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.
<section> <div class="left">1</div> <div class="left">2</div> <div class="right">3</div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tristique sapien ac erat tincidunt, sit amet dignissim lectus vulputate. Donec id iaculis velit. Aliquam vel malesuada erat. Praesent non magna ac massa aliquet tincidunt vel in massa. Phasellus feugiat est vel leo finibus congue.</p> </section>
section { border: 1px solid blue; } div { margin: 5px; width: 50px; height: 50px; } .left { float: left; background: pink; } .right { float: right; background: cyan; }
Sometimes you may want to force an item to move below any floated elements. For instance, you may want paragraphs to remain adjacent to floats, but force headings to be on their own line. See clear
for examples.
Specification | Status | Comment |
---|---|---|
CSS Logical Properties and Values Level 1 The definition of 'float and clear' in that specification. | Editor's Draft | Adds the values inline-start and inline-end . |
CSS Basic Box Model The definition of 'float' in that specification. | Working Draft | Lots of new values, not all clearly defined yet. Any differences in behavior, unrelated to new features, are expected to be unintentional; please report. |
CSS Level 2 (Revision 1) The definition of 'float' in that specification. | Recommendation | No change |
CSS Level 1 The definition of 'float' in that specification. | Recommendation | Initial definition |
Initial value | none |
---|---|
Applies to | all elements, but has no effect if the value of display is none . |
Inherited | no |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 1 | 12 | 1 | 4 | 7 | 1 |
Flow-relative values inline-start and inline-end
|
No | No | 55 | No | No | No |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | 1 | Yes | Yes | 4 | 6 | 1 | Yes |
Flow-relative values inline-start and inline-end
|
No | No | No | 55 | No | No | No |
clear
to force an item to move below a floated element.
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/float