浮动 | float

float

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

一个浮动元素是float的值不是none的元素。

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

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

初始值	none
适用元素	all elements, but has no effect if the value of display is none.
是否是继承属性	no
适用媒体	visual
计算值	as specified
Animation type	discrete
正规顺序	the unique non-ambiguous order defined by the formal grammar

由于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
flex	flex, but float has no effect on such elements
inline-flex	inline-flex, but float has no effect on such elements
other	unchanged

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

语法

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

值

left表明元素必须浮动在其所在的块容器左侧的关键字。

正式语法

left | right | none | inline-start | inline-end

示例

浮动元素的位置

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

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

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;
}

div {
  margin: 5px;
  width: 50px;
  height: 50px;
}

.left {
  float: left;
  background: pink;
}

.right {
  float: right;
  background: cyan;
}

结果

清除浮动

这个例子中，最简单的清除浮动方式就是给我们想要确保左对齐的新标题元素添加clear属性：

规范

Specification	Status	Comment
CSS Logical Properties Level 1The definition of 'float and clear' in that specification.	Editor's Draft	Adds the values inline-start and inline-end.
CSS Basic Box ModelThe 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 1The definition of 'float' in that specification.	Recommendation	Initial definition

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	1.0	(Yes)	1.0 (1.7 or earlier)	4.0	7.0	1.0
inline-start, inline-end	No support	No support	55 (55)	No support	No support	No support

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	1.0	(Yes)	1.0 (1)	6.0	6.0	1.0
inline-start, inline-end	No support	No support	55.0 (55)	No support	No support	No support