float

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

float CSS 属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动（文档流）中移除，但是仍然保持部分的流动性（与绝对定位相反）。

尝试一下

浮动元素是 float 的计算值非 none 的元素。

由于 float 意味着使用块布局，它在某些情况下会修改 display 值的计算值：

指定值	计算值
`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

备注： 如果要在 JavaScript 中把 float 属性当作 HTMLElement.style 对象的一个成员来操作，那么在旧版本的浏览器中，你必须拼写成 cssFloat。另外还要注意到在 Internet Explorer 8 和更老的 IE 当中，要使用 styleFloat 属性。这是 DOM 驼峰命名和 CSS 所用的连字符分隔命名法对应关系中的一个特例（这是因为在 JavaScript 中“float”是一个保留字，因为同样的原因，“class”被改成了“className” 、<label> 的“for”被改成了“htmlFor”）。

语法

css

/* Keyword values */
float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;

/* Global values */
float: inherit;
float: initial;
float: revert;
float: unset;

float 属性的值被指定为单一的关键字，值从下面的值列表中选择。

值

left: 表明元素必须浮动在其所在的块容器左侧的关键字。
right: 表明元素必须浮动在其所在的块容器右侧的关键字。
none: 表明元素不进行浮动的关键字。
inline-start: 关键字，表明元素必须浮动在其所在块容器的开始一侧，在 ltr 脚本中是左侧，在 rtl 脚本中是右侧。
inline-end: 关键字，表明元素必须浮动在其所在块容器的结束一侧，在 ltr 脚本中是右侧，在 rtl 脚本中是左侧。

形式定义

初始值	`none`
适用元素	all elements, but has no effect if the value of `display` is `none`.
是否是继承属性	否
计算值	as specified
动画类型	离散值

形式语法

float = 
  block-start      |
  block-end        |
  inline-start     |
  inline-end       |
  snap-block       |
  <snap-block()>   |
  snap-inline      |
  <snap-inline()>  |
  left             |
  right            |
  top              |
  bottom           |
  none             |
  footnote         

<snap-block()> = 
  snap-block( <length> , [ start | end | near ]? )  

<snap-inline()> = 
  snap-inline( <length> , [ left | right | near ]? )

示例

浮动元素是如何定位的

正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处盒子的边界，或者碰到另外一个浮动的元素。

在下面的图片中，有三个红色的正方形。其中有两个向左浮动，一个向右浮动。要注意到第二个向左浮动的正方形被放在第一个向左浮动的正方形的右边。如果还有更多的正方形这样浮动，它们会继续向右堆放，直到填满容器一整行，之后换行至下一行。

浮动元素至少要与其最高的嵌套浮动子元素一样高。我们给父元素设置了 width: 100%，并将其设为浮动元素，以确保其高度足够包含其中的浮动子元素，并确保其宽度足以容纳这些元素，我们不必与其相邻的元素。

HTML

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

css

section {
  box-sizing: border-box;
  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;
}

结果

清除浮动

有时，你可能想要强制元素移至任何浮动元素下方。比如说，你可能希望某个段落与浮动元素保持相邻的位置，但又希望这个段落从头开始强制独占一行。请参考 clear 中的示例。

规范

Specification
Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # propdef-float
CSS Logical Properties and Values Level 1 # float-clear

浏览器兼容性

BCD tables only load in the browser

参见

区块格式化上下文
使用 clear 强制元素移至浮动元素下方。