仅仅为了自己复习，勿喷！
首先看看inline-block的特性：
1、块级元素能在一排显示。2、内联支持宽高。3、默认内容撑开宽度。4、标签之间的换行被解析。5、在IE6,7下，不支持块标签的inline-block。
再来看看float浮动的特性：
1、块级元素能在一排显示。2、内联支持宽高。3、默认内容撑开宽度。4、脱离文档流。5、提升层级半级。
清浮动：
clear:left | right | both | none | inherit；元素的某个方向上不能有浮动元素。下面讲讲一些清浮动的方法和优缺点：
1、直接给父级加固定高度（太死板，无扩展性）。
2、给父级也加float浮动（这样还要给父级的父级都加浮动，而且加了浮动的元素margin左右自动失效）。
3、给元素本身加display：inline-block（元素的margin左右自动失效）。
4、在浮动元素的后面，利用空标签清除浮动。<div class='clear'></div> .clear { height:0;font-size:0;line-height:0;clear:both;}
这里的font-size:0;和line-height:0;是用来解决在ie6下最小高度为19px的问题。
5、在浮动元素后面加br清浮动<br clear='all' />
6、after伪类清浮动，也是用的比较多的方法。after伪类就是向元素的内容的最末尾添加内容
.clear:after {content:'';display:block;clear:both;}由于ie6,7下不兼容after伪类
所以利用zoom触发ie下的haslayout来让元素根据自身内容计算宽高，最终的样式为：
.clear { zoom:1;}
.clear:after {content:'',display:block;clear:both;}
7、overflow清浮动overflow:hidden/auto; 看意思就知道这会让元素去计算内容的宽高，从而清除浮动。同样ie6不支持，所以配合zoom：1使用
.clear {overflow:hidden;zoom:1;}