介绍
float属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。
注：当一个元素浮动之后，从普通文档流中脱离，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。
浮动元素的浮动位置不能超过包含块的内边界
基本属性
- none：不进行浮动（默认）
- left：浮动在其所在的块容器左侧
- right：浮动在其所在的块容器右侧
使用
介绍其实很简单，怎样用好它就需要实践了。
show me code ！！！
浮动实验
下面通过一步步的实验，来学习并了解float
先来三个box
样式就不贴了
<div>
<div class="box box1">1</div>
<div class="box box2 ">2</div>
<div class="box box3 ">3</div>
</div>
效果：正常的文档流
实验1：为box2添加浮动
.float-right {
float: right;
}
<div>
<div class="box box1">1</div>
<div class="box box2 float-right">2</div>
<div class="box box3 ">3</div>
</div>
效果：为box2添加 float: right;后，可以看到box2跑到右边去了，box3紧跟在box1下面。
疑问：box2和box3为什么不在一条水平线上？（为什浮动后有间隙？）
原因：边界重叠；块级元素的上外边距和下外边距有时会合并（或折叠）为一个外边距，其大小取其中的最大者，这种行为称为外边距折叠（margin collapsing），有时也翻译为外边距合并。浮动元素和绝对定位元素的外边距不会折叠。详情
实验2：box2、box3都添加浮动
<div>
<div class="box box1">1</div>
<div class="box box2 float-right">2</div>
<div class="box box3 float-right">3</div>
</div>
效果：先是box2向右浮动，然后box3紧跟着box2向右浮动。
实验3：多个元素浮动，且超出屏幕宽度
<div>
<div class="box box1">1</div>
<div class="box box2 float-right">2</div>
<div class="box box3 float-right">3</div>
<div class="box box2 float-right">2</div>
<div class="box box3 float-right">3</div>
</div>
效果：当下个浮动元素发现空间不够时会换行
实验4：左右浮动
<div>
<div class="box box1">1</div>
<div class="box box2 float-right">2</div>
<div class="box box3 float-left">3</div>
</div>
效果1：空间足够时，分别位于屏幕两侧
效果2：空间不足时，位于下发的元素会另起一行
浮动的元素不会“干”在一起，『手动滑稽』
清除浮动
我们知道，一个块级元素如果没有设置height，其height是由子元素撑开的。对子元素使用了浮动之后，子元素会脱离标准文档流，也就是说，父级元素中没有内容可以撑开其高度，这样父级元素的height就会被忽略，这就是所谓的高度塌陷。要解决这样的问题，我们就是要使用清除浮动——clear。
clear属性
指定一个元素是否可以在它之前的浮动元素旁边，或者必须向下移动(清除浮动) 到这些浮动元素的下面。
- none：默认值。允许浮动元素出现在两侧
- left：在左侧不允许浮动元素
- right：在右侧不允许浮动元素
- both：在左右两侧均不允许浮动元素。
例：上面提到仅box2浮动时，box3会紧跟在box1下方，可能被box2盖住。如下图：
如果不想被box2盖住，怎么怎么办？
解决办法：为box3添加clear属性
.float-clear-right {
clear: right;
}
<div>
<div class="box box1">1</div>
<div class="box box2 float-right">2</div>
<div class="box box3 float-clear-right">3</div>
</div>
效果：box3添加清除右浮动后，不受右浮动的影响，回到原来的位置了
文字环绕
通过float实现一个文字环绕效果，很简单
例：
.float-left {
float: left;
}
<div>
<img class="float-left" src="../image/image1.png" style="height: 100px; width: 100px;">
<p >
Java是世界上最好的语言。Java是世界上最好的语言。
Java是世界上最好的语言。Java是世界上最好的语言。
Java是世界上最好的语言。Java是世界上最好的语言。
Java是世界上最好的语言。Java是世界上最好的语言。</p>
</div>
效果：
文字环绕
很简单，看效果挺好的。
然而，看似简单的背后，往往“暗藏杀机”
为了方便看效果，为元素添加背景色
遇到问题
<p>中的文字内容很多的时候，很健康。如果文字内容少点？
你以为的结果是这样：
实际效果却是这样：
这就搞笑了，浮动的元素<img>超出了父元素<div>，飘在上面了。
如果在后面加一个div会怎么样？
<div class="box">box</div>
效果：后续的布局顶上来了，且box中的文本还被挤过来了。
跟上面一样，也是高度塌陷问题
所以，清除浮动后，就能解决这个问题
解决办法1：清除浮动
效果：
这个问题是解决了，刚缓口气，又发现了另一个问题：margin-top不生效。（准确来说是小于一定数值不生效）
例：为box添加margin-top
{ margin-top: 20px }
效果：没有任何效果，margin-top:20px没有生效
这种情况下margin-top失效的原因
解决办法2：BFC
BFC全称block formatting context，中文为"块级格式化上下文"。BFC元素是不可能发生margin重叠的，另外，BFC元素也可以用来清除浮动的影响。
所以：BFC不仅可以处理浮动的影响，还能处理margin重叠的问题
BFC的触发条件有很多，其中之一：overflow的值为auto、scroll或者hidden
应用：为外层<div>添加overflow:hidden
<div style="overflow: hidden">
<img ...>
<p ...></p>
</div>
效果：外层div的高度也有了，box的margin-top也生效了
只要满足下面任意一个条件就会触发BFC:
● html根元素；
● float的值不为none；
● overflow的值为auto、scroll或者hidden；
● display的值为table-cell、table-caption和inline-block中的任何一个；
● position的值不为relative和static；
参考
详解CSS float属性
CSS浮动float详解
【前端Talkking】CSS系列——CSS深入理解之float浮动
https://developer.mozilla.org/zh-CN/docs/CSS/float
http://www.runoob.com/css/css-float.html
相关阅读
CSS : 入门
CSS : display
CSS : position
CSS : 对齐、居中
有错误之处，感谢指出，接收批评
网友评论