CSS float属性是一个定位属性，用于使元素脱离正常的文档流，并浮动在它的父容器的左侧或右侧。

浮动元素（floating element）是一个float属性计算值不是none的元素。它会浮动在父容器的左侧或右侧，其它文本元素或行内元素会环绕在它的周围。

一个典型的浮动元素的例子是在一篇文章中，文字环绕在一幅插图的周围。这张图片就是一个浮动元素。目前文本元素或行内元素只能环绕在浮动元素的一侧，无法同时环绕在浮动元素的四周。例如下图是一个文本环绕浮动图片元素的示意图：

会占用一行的空间，即使它里面的内容很少，剩余的空白也会占用余下的行空间。就算我们将一个块级元素的宽度设置得很小，它也同样会占据一行空间。如下图所示：

当块级元素被浮动之后，它的宽度基于它的内容来计算。各个浮动元素会排列成为一行。例如对上面的块级元素使用float:left;之后，得到如下图的效果：

在float属性出现之前，前端开发人员通常使用表格来完成页面的布局。这种布局方式对于复杂的页面是一个灾难，不仅编写十分困难，而且维护起来也非常困难。float属性的出现改变了这一格局。使用float属性来进行页面布局使得HTML代码非常简单，例如下图中的页面布局，使用float属性来布局，仅需要几行HTML代码：

HTML文档的根元素不能被浮动。为absolutely的元素也不能被浮动。

浮动元素会被保留在文档流中，而不是像元素一样被从文档流中移除。绝对定位的元素被从文档流中完全移除，不会对页面中的其它元素照成影响。而浮动元素还是会对环绕在它周围的元素照成影响。

float属性不会对属性为none的元素起作用。当一个内联元素或内联块级元素浮动之后，它会变为一个块级元素。内联表格（inline-table）被浮动之后会变为表格（table）元素。

在使用float属性时，最重要的一点是要注意浮动元素对它的父元素照成的影响。这就是所谓的清除浮动的问题。

当一个元素被浮动起来之后，它的父容器的高度（没有明确设置height属性）为容器中剩余内容的高度。浮动元素不会对其父容器的高度产生影响。如果父容器中只有一个元素，当这个元素浮动起来之后，父容器就会“坍塌”，其高度变为0。

另外，浮动元素还有另外一个特性，一个浮动元素会影响其它容器中的文本或行内元素，如下图所示：

从上面的图中可以看到，不仅第一个容器中的文本会环绕浮动元素，第二个容器中的文本也会环绕这个浮动元素。

为了避免父容器“坍塌”和浮动元素对其它元素的影响，我们就需要清除浮动。

下面是几种常用的清除浮动的方法：

• 1、使用一个空的元素来清除浮动：这个技术是使用一个空的<div>元素，为它设置属性，清除它两侧的浮动，使它“撑开”父容器的空间。

  <div style="clear:both;"></div>
  <!-- 或者 -->
  <div class="clearfix"></div>
  <style>
    .clearfix {
      clear: both;
    }
  </style>
  

• 2、使用overflow属性来清除浮动：这是常用的清除浮动的方法之一。你可以为浮动元素的父容器设置overflow: hidden;或overflow: auto;。由于IE6不支持overflow属性，你可以为父容器设置一个明确的高度来解决IE6的问题，或者使用下面的代码：

  .container {
      overflow: hidden;
      /* 或者 */
      overflow: auto;
  }
  /* IE6方案*/
  .container {
      height: 1%; 
      overflow: visible;
  }
  

• 3、使父容器也浮动起来。

  .container {
      float:left;
  }  
  

• 4、使用:after伪元素来清除浮动：这个技术和使用额外的<div>元素来清除浮动的原理是一样的，只不过不需要额外的元素，而是使用父容器的:after伪元素来充当这个额外的元素。

  .container:after {
      content: "."; 
      visibility: hidden; 
      display: block; 
      height: 0; 
      clear: both;
  }
  

• 5、使用技术：这是目前使用最为广泛的清除浮动的方法。它可以兼容几乎所有的浏览器：Firefox 3.5+, Safari 4+, Chrome, Opera 9+ 和 IE 6+。

  /**
   * For modern browsers
   * 1. The space content is one way to avoid an Opera bug when the
   *    contenteditable attribute is included anywhere else in the document.
   *    Otherwise it causes space to appear at the top and bottom of elements
   *    that are clearfixed.
   * 2. The use of `table` rather than `block` is only necessary if using
   *    `:before` to contain the top-margins of child elements.
   */
  .clearfix:before,
  .clearfix:after {
      content: " "; /* 1 */
      display: table; /* 2 */
  }
  
  .clearfix:after {
      clear: both;
  }
  
  /**
   * For IE 6/7 only
   * Include this rule to trigger hasLayout and contain floats.
   */
  .clearfix {
      *zoom: 1;
  }
  

在CSS3中，有一个min-height属性，这个属性本身就可以清除元素的浮动。当为一个元素设置min-height属性之后，它会强制其尺寸大到足以容纳它里面的浮动元素。由于目前不是所有的浏览器都支持min-height属性，所以要清除浮动，建议目前还是使用Micro-Clearfix Hack技术。

官方语法

float: left | right | none | inherit   
                            

新的CSS3中，float属性新增了一些值：

float: [ left | right | top | bottom | start | end | none | <page-floats> ] && contour?
                            

参数：

• left：元素左浮动。
• right：元素右浮动。
• none：元素不浮动。
• inherit：继承父元素的浮动值。

由于CSS3中新增的值目前还没有浏览器支持，这里不做介绍。

float属性的初始值为none。

应用范围

float属性可以所有的元素上。

示例代码

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

float: inherit;                              
                            

浏览器支持

所有的现代浏览器都支持float属性。包括：Chrome, Firefox, Safari, Opera, Internet Explorer以及Android 和 iOS。