1. 为什么要使用float？
1.1 为了让div等块状元素可以在行中排列
我们知道块状元素在页面中独占一行，自上而下排列，既文档流。无论每一个块状元素的宽度为多少，都无法显示在一行中
1.2 为了制作出环绕效果，通过float我们可以轻松的制作出文字环绕图片等效果
所以，我们可以使用浮动（float）来解决。通过浮动，可以让块状元素脱离标准文档流，漂浮在文档流之上进行排列
2. 具体的使用方法
这是一般情况下我们放入四个不同大小的块状元素
<body>
<div style="width: 550px; height: 80px; background-color: orange;">第一块</div>
<div style="width: 350px; height: 180px; background-color: red;">第二块</div>
<div style="width: 450px; height: 110px; background-color: green;">第三块</div>
<div style="width: 550px; height: 90px; background-color: blue;">第四块</div>
</body>
这是对所有的div添加左浮动效果后的情况
这是对所有的div添加右浮动效果后的情况
我们可以看到四个块状元素都依次进行排列，但是这样也发生了很多问题
2.1
从上面的图中我们可以看到，由于html的宽度不足以排列四个div，所以第四块进行了自动的换行，同时又因为第二块的高度原因，第四块被卡在了第二块之后
如果我们把第二块的高度和第一块保持统一
可以看到，因为没有别的块状元素的阻挡，第四块顺利的靠了左边框，但是由于第三块的高度原因，仍保持一定距离
得出结论：浮动的元素在同一行没有足够的空间显示时，会自动换到下一行，和上一行的距离以上一行的最大块状元素的高度为准。如果被阻挡了没有靠网页左边框就会贴在阻挡的块状元素上。
2.2
当我们仅对第二块施加左浮动的时候
第二块脱离了标准流，第三块往上递补，一三四形成新的文档流，第二块漂浮在空中。
得出结论：浮动后的元素会遮挡下一个未浮动的元素的区域，但不遮挡内容，内容会在浮动块后面显示出来
2.3 注意事项
- 如果一个浮动块的前面的元素也是浮动块，就会跟跟随到前面的浮动块后面（宽度不够就换行）。
- 如果一个浮动块的前面的元素是标准流的块，就会排列到前面的标准流块下面
- 浮动后的元素，不论其本身是什么类型的框，都会变成块元素
3. 清除语法
清除语法
clear : none | left | right | both
值的含义：
none ：默认值。允许两边都可以有浮动对象；
left/right：不允许左/右边有浮动对象；
both : 不允许有浮动对象
如果我们只将第二三四块设置为左浮动
如果我们要让第三第四块都按照无浮动的竖向排列
只需要在第三和第四块上添加clear: left;
<div style="width: 450px; height: 110px; background-color: green;float: left;clear: left;">第三块</div>
<div style="width: 550px; height: 90px; background-color: blue;float: left; clear: left;">第四块</div>
注意：这个清除只对施加清除规则的元素本身生效，既你想让谁正常显示就设置谁。比如你无法通过clear：right；让跟在第三块后面的第四块恢复正常
