定义和用法
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
float，顾名思义就是浮动，设置了float属性的元素会根据属性值向左或向右浮动，我们称设置了float属性的元素为浮动元素。
浮动元素会从普通文档流中脱离，但浮动元素影响的不仅是自己，它会影响周围的元素对齐进行环绕。举例说明如下：

值 描述
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。

浮动的出现：

只是用来让文字环绕图片而已（给图片加float）

浮动的两个特性：

包裹性：

浮动类似于一个带有方位的display：inline-block 属性，浮动元素不定义宽度的情况下，宽度是由内容撑开的。

破坏性：
文字之所以会环绕含有float属性的图片是因为浮动怕破坏了正常的line boxes。（我在chrome上测试float会把 图片 的display属性，从inline改变为block）

这里子div相当于一个图片，给 display赋值inline

.float-ele { float: left; margin: 10px; padding: 10px; background: #ff6a00; width: 100px; text-align: center; }

float的详细细节
在说明float带来的详细细节之前，我们首先要了解一个概念。
包含块：浮动元素的包含块就是离浮动元素最近的块级祖先元素，前面叙述的例子中，div.box就是span元素的包含块。

了解完包含块的概念之后，首先要说明的浮动元素的第一个特性：不管一个元素是行内元素还是块级元素，如果被设置了浮动，那浮动元素会生成一个块级框，可以设置它的width和height，因此float常常用于制作横向配列的菜单，可以设置大小并且横向排列。

css_清除浮动的4种方式

一、父级添加overflow: hidden；
　　　子元素浮动了，会造成父元素的高度坍塌。只要给父元素添加overflow: hidden;属性，就可以解决浮动带来的影响。
二、通过属性clear:both;达到清除浮动的目的；
　　元素浮动后，只需要在浮动元素添加多一个块级元素，并添加clear: both;属性，便可以达到清除浮动的目的。
三、通过给父级元素添加伪类after，达到清除浮动的目的；
　　这种方式也是使用clear: both;的方式达到效果，只是变相的使用了伪类after，使得页面结构更简洁，也是常用的清理浮动的方式。
四、使用双伪类；
　　此方式和三原理一样，代码更简洁。