float 和 inline-block的心得

float

优点：

横向排列时比较方便，不存在浏览器兼容问题。

缺点：

1）多行横向排行时，换行后经常不能顶行显示。

2）浮动后会跳出当前流，造成父元素高度塌陷，解决办法比较成熟统一 ，不存在浏览器兼容问题。

 

inline-block

缺点：最大的问题就是在不同的浏览器下，解决空白间隙的方法会不同，难以统一，兼容性不好。常见解决办法有，父元素设置font-size:0;大部分浏览器可以这样，个别不行的在不影响布局的前提下还可以加个display:table。个人不喜欢用letter-space和word-space总感觉不同浏览会有不同问题。

优点：换行时顶行显示，可以用text-align,white-space等属性操作，text-align:justify两边对齐，效果特棒，white-space:nowrap可以不换行，有时有奇效。

 

 

先写这一点，有时间再补充吧