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。