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).
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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
|
inline-flex
|
flex
|
inline-grid
|
grid
|
other | unchanged |
Note: If you're referring to this property from JavaScript as a member of the HTMLElement.style
object, modern browsers support float
, but in older browsers you have to spell it as cssFloat
, with Internet Explorer versions 8 and older using styleFloat
. This was 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").
Syntax
/* 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.
Values
left
- The element must float on the left side of its containing block.
right
- The element must float on the right side of its containing block.
none
- The element must not float.
inline-start
- The element must float on the start side of its containing block. That is the left side with
ltr
scripts, and the right side withrtl
scripts. inline-end
- The element must float on the end side of its containing block. That is the right side with
ltr
scripts, and the left side withrtl
scripts.
Formal definition
Initial value | none
|
Applies to | all elements, but has no effect if the value of display is none .
|
Inherited | no |
Computed value | as specified |
Animation type | discrete |
Formal syntax
left | right | none | inline-start | inline-end
Examples
How floated elements are positioned
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.
A floated element is at least as tall as it's tallest nested floated children. We gave the parent width: 100%
and floated it to ensure it is tall enough to encompass it's floated children, and to make sure it takes up the width of the parent so we don't have to clear it's adjacent sibling.
HTML
<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>
CSS
section {
border: 1px solid blue;
width: 100%;
float: left;
}
div {
margin: 5px;
width: 50px;
height: 150px;
}
.left {
float: left;
background: pink;
}
.right {
float: right;
background: cyan;
}
Result
Clearing floats
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.
Specifications
Specification | Status | Comment |
---|---|---|
CSS Logical Properties and Values Level 1The definition of 'float and clear' in that specification. | Editor's Draft | Adds the values inline-start and inline-end .
|
CSS Level 2 (Revision 1)The definition of 'float' in that specification. | Recommendation | No change |
CSS Level 1The definition of 'float' in that specification. | Recommendation | Initial definition |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
float
|
Chrome
Full support 1 |
Edge
Full support 12 |
Firefox
Full support 1 |
IE
Full support 4 |
Opera
Full support 7 |
Safari
Full support 1 |
WebView Android
Full support 1 |
Chrome Android
Full support 18 |
Firefox Android
Full support 4 |
Opera Android
Full support 10.1 |
Safari iOS
Full support 1 |
Samsung Internet Android
Full support 1.0 |
Flow-relative values inline-start and inline-end
|
Chrome
No support No |
Edge
No support No |
Firefox
Full support 55 |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android
No support No |
Chrome Android
No support No |
Firefox Android
Full support 55 |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
No support No |
Legend
- Full support
- Full support
- No support
- No support
See also
- Block formatting context
- Use
clear
to force an item to move below a floated element.
float by Mozilla Contributors is licensed under CC-BY-SA 2.5.