float

概述

CSS的float 属性可以使一个元素脱离正常的文档流，然后被安放到它所在容器的的左端或者右端，并且其他的文本和行内元素围绕它安放。

一个 浮动元素（floating element） 是一个float属性计算值不是none的元素。

由于float 使用块框架（block layout）来显示，所以使用了float，就会隐式地改变 display的计算值。以下是display的计算值改变的一些情况：

语法

float: left;
float: right;
float: none;

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

取值

left

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

right

表明元素必须漂浮在其所在的块容器右侧的关键字。

none

表明元素不得进行浮动的关键字。

形式化语法

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 会导致这个标题元素出现在边栏的下方，这显然不是我们期望的结果。（译注：原文“what we want”应该是指如果红色方块作为边栏，而我们不希望 H2 位于边栏下面，同时还要容器包裹住其内容。总之，经实验，个人觉得这段话说得意思不明确）

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

p.withRedBoxes { overflow: hidden; height: auto; }

规范

浏览器兼容性

参见

• 块级格式化上下文（Block formatting context）