一、为什么需要浮动？
块级元素不能与任何元素标签在同一行，行级元素虽然可以和行级元素在同一行，但是无法调整元素的宽高！
所以标准的文档流限制太多，非常生硬，不够灵活。
为了让行内元素有并排的效果，也要能设置宽高，所以就需要浮动。
二、关于浮动的性质。
浮动的元素会脱离标准的文档流!！这个很重要！
当为标签设置了浮动之后，这个标签就可以有宽和高属性，即使是未转换的行内元素也可以设置宽和高。
一个行级标签，不需要转成块级元素，就可以设置宽度和高度！
一旦一个元素标签浮动了，那么，浮动的标签之间就可以并排，而且可以设置宽高，无论是行内标签还是块级标签。
浮动的元素还会互相贴靠。
下面有个例子，直接可以理解下，什么是浮动，脱标。
<style type="text/css">
.box1{
float: left;
width: 300px;
height: 400px;
background-color: yellowgreen;
}
.box2{
float: left:
width: 400px;
height: 400px;
background-color: skyblue;
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
此时，两个块级元素并排在了一起。
那么接下来把代码改一下：
<style type="text/css">
.box1{
float: left;
width: 300px;
height: 400px;
background-color: yellowgreen;
}
.box2{
# 在这里去掉了box2 的浮动
width: 400px;
height: 400px;
background-color: skyblue;
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
结果变成了这样，box1直接盖在了box2的上面，这是因为box1已经脱离了标准文档流，box2还是普通文档流，在box2之前已经没有普通的文档流了，所以box2也会贴到最边上。
