为何需要float？
思考如何使两个块级元素处于同一行，块级元素默认是会换行的。比如div元素
<div style="width:100px;">11111</div>
<div style="width:150px">2222</div>
结果如图
image.png
添加一个float属性
<div style="width:100px;float:left">11111</div>
<div style="width:150px">2222</div>
结果
image.png
如果是给第二个div添加float呢？
<div style="width:100px;">11111</div>
<div style="width:150px;float:left">2222</div>
结果如下
image.png
再看例子
<div style="width:100px;float:right">11111</div>
<div style="width:150px;">2222</div>
结果如下
image.png
总结一下，就是float使元素漂浮到最左边或者最右边，然后后来的元素会补上其留下来的空白。
如何不让后来的元素递补空白？
<div style="width:100px;float:left">11111</div>
<div style="width:150px;clear:left">2222</div>
添加clear属性之后，结果
image.png
尽管第一个div已经float:left了，这两个div仍然在两行上，就是由于第二个div不让它左边有float
因为css的定义是后面的可以覆盖前面的。
CSS中，float浮动的理解 - guomutian911的专栏 - 博客频道 - CSDN.NET
总结
CSS网页布局的原理，就是按照HTML代码中对象声明的顺序，以流布局的方式来显示它，而流布局就不得不说到float浮动技术，在HTML中的所有对象，默认分为两种：块元素(block element)、内联元素(inline element)，虽然也存在着可变元素，但只是随上下文关系确定该元素是块元素或者内联元素。关于块元素和内联元素可以参考这里。
其实CSS的float属性，作用就是改变块元素(block element)对象的默认显示方式。block对象设置了float属性之后，它将不再独自占据一行。可以浮动到左侧或右侧，关于float属性的详细说明可以参考这里。
