如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
float的值：
left元素向左浮动。
right元素向右浮动。
none默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit规定应该从父元素继承 float 属性的值。
1，浮动的历史
在早期网页制作过程中，为了达到图片word文档那样的文字环绕效果，不至于图片和文字不在一行显示，图片占据一行，文字占据一行，这样的样式并不符合大众的审美观，浪费空间，所以w3c就创建了float这个css属性。
2，浮动的包裹性和破坏性
破坏性是指子级元素设置浮动后将会跳出父级元素，父级元素将不被浮动元素所撑开，除非清除浮动带来的影响。
包裹性是指子级元素设置浮动后，并且父元素已经被清除浮动后将会将子元素包裹住，就像inline-block一样。
4，浮动在布局中的应用
(1)，双飞翼布局
双飞翼布局就是利用float和margin负值相结合的方式，将center定位到最中间，难点在于margin单位百分比的理解。
(2)，圣杯布局
圣杯和双飞翼区别：
二者都是三栏自适应布局方案，圣杯布局是需要结合相对定位，用到left属性，而双飞翼布局只需要使用浮动和margin定位，前者三栏布局是每栏相互独立，而后者是center占据是100%,left和right是浮在center上的。
(2)，两列布局
如图五图六所示，当左侧div左浮动，右侧div将会自动适应余下的宽度，当界面大小发生改变时，右侧div同样会随着变化，如果想让左右div中间有一个间距的话，我们可以用右侧div设置一个margin-left为：左侧div的宽度+间距。
如果想让左侧右侧同时自适应的话，我们可以让右侧元素BFC化，此时左侧元素div的marin-left才会有效，如果右侧div不BFC化的话，属于正常流，而浮动已经脱离正常流，所以此时它的margin-left是无效的。
5，清除浮动带来的影响的方法
(1)，使用clear:both
.father:after{/*IE7和IE6不识别*/
content:''
display:block
clear:both
overflow:hidden
height:0
}
.father{
*zoom:1/*兼容IE7*/
}
(2)，内部使用空标签
div{clear:both}
缺点是多了一个空标签，无意义。
(3)，使用BFC
在子元素中使用overflow,position,inline-block,tabel-cell
(4)，使用table
.father:after{/*IE7和IE6不识别*/
content:''
display:table
clear:both
}
.father{
*zoom:1/*兼容IE7*/
}
