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
不是
none
.
As
float
implies the use of the block layout, it modifies the computed value of the
display
values, in some cases:
| 指定值 | 计算值 |
|---|---|
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 |
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").
/* Keyword values */ float: left; float: right; float: none; float: inline-start; float: inline-end; /* Global values */ float: inherit; float: initial; float: unset;
float
property is specified as a single keyword, chosen from the list of values below.
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
ltr
scripts, and the right side with
rtl
scripts.
inline-end
ltr
scripts, and the left side with
rtl
scripts.
| 初始值 |
none
|
|---|---|
| 适用于 |
all elements, but has no effect if the value of
display
is
none
.
|
| 继承 | no |
| 计算值 | 如指定 |
| 动画类型 | discrete |
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.
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.
<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;
width: 100%;
float: left;
}
div {
margin: 5px;
width: 50px;
height: 150px;
}
.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
范例。
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Logical Properties and Values Level 1
The definition of 'float and clear' in that specification. |
编者草案 |
Adds the values
inline-start
and
inline-end
.
|
|
CSS Level 2 (Revision 1)
The definition of 'float' in that specification. |
推荐 | No change |
|
CSS Level 1
The definition of 'float' in that specification. |
推荐 | 初始定义 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
float
|
Chrome 完整支持 1 | Edge 完整支持 12 | Firefox 完整支持 1 | IE 完整支持 4 | Opera 完整支持 7 | Safari 完整支持 1 | WebView Android 完整支持 1 | Chrome Android 完整支持 18 | Firefox Android 完整支持 4 | Opera Android 完整支持 10.1 | Safari iOS 完整支持 1 | Samsung Internet Android 完整支持 1.0 |
Flow-relative values
inline-start
and
inline-end
|
Chrome 不支持 No | Edge 不支持 No | Firefox 完整支持 55 | IE 不支持 No | Opera 不支持 No | Safari 不支持 No | WebView Android 不支持 No | Chrome Android 不支持 No | Firefox Android 完整支持 55 | Opera Android 不支持 No | Safari iOS 不支持 No | Samsung Internet Android 不支持 No |
完整支持
不支持