1.Float的介绍
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄(塌陷的产生)。
注：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
浮动模型的基本知识：浮动模型也是一种可视化格式模型，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样.《CSS Mastery》一书中讲的特别有趣和好理解，我简单的用几个demo介绍一下。
a.不浮动的时候 <div style="border: solid 5px #0e0; width:300px;"> <div style="height: 100px; width: 100px; "> </div> <div style="height: 100px; width: 100px; "> </div> <div style="height: 100px; width: 100px; "> </div> </div>
b.当red部分右浮动：<div style="border: solid 5px #09F; width:300px;"> 父元素内容 <div style="height: 100px; width: 100px; float:right;"> </div> <div style="height: 100px; width: 100px; "> </div> <div style="height: 100px; width: 100px; "> </div>
c.当red部分左浮动：<div style="border: solid 5px #09F; width:300px;">
父元素内容
<div style="height: 100px; width: 100px; float:left;"></div>
<div style="height: 100px; width: 100px; "></div>
<div style="height: 100px; width: 100px; "></div>
</div>
此时的green和yellow部分和”父元素内容”是在普通文档流中，red部分覆盖了文档流中的green部分。
d.所有的向左浮动,父元素的高度为0<div style="border: solid 5px #09F; width:300px;">
<div style="height: 100px; width: 100px; float:left;">
</div>
<div style="height: 100px; width: 100px; float:left;">
</div>
<div style="height: 100px; width: 100px; float:left;">
</div>
当所有的元素都向左或者是向右浮动（此例子效果相同如上图），父元素未浮动，此时父元素就会出现塌陷，即父元素的高度为0px。
如果父包含块太窄而无法容纳水平排列的多个浮动元素时,那么其它浮动块儿向下移动,,直至找到有足够的宽度容纳浮动块,如果浮动元素的高度不同,那么在向下移动的时候可能会被卡住。
e.当父元素的宽度不足以容纳所有的浮动元素时，浮动块就会下移，如下图：<div style="border: solid 5px #09F; width:240px;">
<div style="height: 100px; width: 100px; float:left;">
</div>
<div style="height: 100px; width: 100px; float:left;">
</div>
<div style="height: 100px; width: 100px; float:left;">
</div>
</div>
f.当高度不等时会出现类似“卡住了”现象，如下图<div style="border: solid 5px #09F; width:240px;">
<div style="height: 110px; width: 100px; float:left;"> </div>
<div style="height: 100px; width: 100px; float:left;"> </div>
<div style="height: 80px; width: 100px; float:left;"> </div>
</div>
