MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

 

 float CSS属性指定一个元素应沿其容器的左侧或右侧放置,文本和内联元素将围绕它。

然后,该元素从网页的正常流动中获取,尽管仍然保持一部分流动,与绝对定位相反。

浮动元素是浮点数不是非浮点元素

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

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.
是否是继承属性
适用媒体visual
计算值as specified
Animation typediscrete
正规顺序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, 但是float对这样的元素不起作用
inline-flex inline-flex, 但是float对这样的元素不起作用
other unchanged
备注:如果要在 JavaScript 中把float属性当作element.style对象的一个成员来操作,那么你必须拼写成cssFloat。另外还要注意到在 Internet Explorer 8 和更老的IE当中,要使用styleFloat属性。这是DOM驼峰命名和CSS所用的连字符分隔命名法对应关系中的一个特例(这是因为在 JavaScript 中"float"是一个保留字,因为同样的原因,"class"被改成了"className" 、"for"被改成了"htmlFor")。

语法

float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;

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

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

形式化语法

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

例子

<style type="text/css">
  div { border: solid red;  max-width: 70ex; }
  h4  { float: left;  margin: 0; }
</style>

<div>
  <h4>HELLO!</h4>
  This is some text. This is some text. This is some text.
  This is some text. This is some text. This is some text.
  This is some text. This is some text. This is some text.
  This is some text. This is some text. This is some text.
</div>

浮动元素是如何定位的

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

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

清除浮动

在前面的例子当中,浮动的元素的高度比它们所在的容器元素(是块元素)的高度小。然而如果块元素内的文本太短,不足以把块元素的大小撑到高度大于所有浮动元素的高度,我们可能会看到意想不到的效果。例如,如果上面图片中的文字只有"Lorem ipsum dolor sit amet,",并且接下来是另外一个和"Floats Example"这个标题一样风格的标题元素,那么第二个标题元素会出现在红色的正方形之间。然而在大多数这种情况下,我们希望这个标题元素是靠左对齐的。为了实现这个效果,我们需要清除浮动。

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

h2.secondHeading { clear: both; }

然而这个方法只是在同一块级格式化上下文(block formatting context)中没有其他元素的时候才是有效的。如果我们的 H2 有兄弟元素是向左浮动和向右浮动的边栏,那么使用clear 会导致这个标题元素出现在边栏的下方,这显然不是我们期望的结果。

如果不能使用清除浮动,另一种做法是浮动容器的限制块级格式化上下文。再次列举上面的例子,有三个红色的正方形和一个P元素。我们可以设置P元素的overflow属性值变成hidden 或者auto,因为这样可以让容器元素伸展到能够包含红色正方形,而不是让他们超出块元素的底部。

p.withRedBoxes { overflow: hidden; height: auto; }
Note: 设置overflowscroll 也可以让块元素撑大来包含所有的浮动子元素,但是这样不论内容有多少都会显示出一个滚动条。即使 height 默认值为 auto,我们还是设置了,是为了表明容器应该增大高度以便包裹住里面的内容。

规范

规范 状态 说明
CSS Logical Properties Level 1
float and clear
Editor's Draft 添加了inline-start 和inline-end值
CSS Basic Box Model
float
Working Draft 大量新属性值,但目前还没完全定义清楚。任何与新特性无关的浏览器差异应该是无意中造成的,需要报告。
CSS Level 2 (Revision 1)
float
Recommendation 没有改变。
CSS Level 1
float
Recommendation 最初的定义。

浏览器兼容性

特性 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
基本支持 1.0 (Yes) 1.0 (1.7 or earlier) 4.0 7.0 1.0
inline-startinline-end 未实现
?
45 (45) [1] 未实现 未实现 未实现
特性 Android Edge Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile
基本支持 1.0 (Yes) 1.0 (1) 1.0 6.0 6.0 1.0
inline-startinline-end 未实现 ? 45.0 (45) [1] 2.5 未实现 未实现 未实现

[1] Enabled by default on Nightly and Aurora (Dev edition); to activate it on a release or beta version, you need to flip the layout.css.float-logical-values.enabled to true.

参见

文档标签和贡献者

 最后编辑者: xgqfrms-GitHub,