关于inline-block和float的区别

在css样式表中，inline和float都能使元素进行横向排列，但不同的是：

1.inline-block：多个元素设置inline-block后无论设置前是行内元素还是块级元素都将变成行内块元素，（注意：是具有块元素性质的行内元素），此时可以设置盒子的width  height  margin  padding……的属性值，但比较特殊的是，如果给多个元素中的某一个元素设置padding和margin将作用于整个行内所有元素。定位属性值也同理（left/right/top/bottom）。

2.float: 与inline-block不同的是，多个元素设置为float后无论之前是行内元素还是块级元素都将变成块级元素，并且此时每个元素互不关联，设置各自的margin/padding或定位属性值（top/bottom/left/right），除了浮动元素的特此外，都将之作用于自身。虽然float有这些好处，但是一旦忘了清除浮动，那么便很可能会造成父级元素塌陷（如：缩小浏览器窗口，元素往下掉并很可能超过父级所在区域对自身和其他元素造成影响），并且之后的元素也会收到浮动的影响（如：合并到浮动元素那一行脱离自身所在的位置）。

总之，inline-block和float各自有各自的优点和缺点，怎么使用就看我们在实际应用中所需要的功能需求进行扬长避短。

扩展一：介绍几种清除float浮动的方法：

方法1：最基本的方法，在float后面跟随的元素的css样式表里加上clear:both，表示该元素左边和右边都不能有浮动元素。

方法2：是方法1的另一种实现，利用伪元素after给浮动元素的父级添加一个宽高为0的block伪元素设置clear:both.

其实1,2种方法都可以用一个类名保存起来，然后再需要的地方加上类名即可，能明确查看哪个地方添加了浮动元素。

方法3: 给float的元素的父极设置宽高。原理：如果不给父级设置宽高，那么父级宽高默认由内部元素撑开，如果元素塌陷自然带动父级元素宽高变化造成塌陷。只要固定父级宽高那么float元素将会被挡在父级所在区域，解决了浮动塌陷问题。

三种方法都比较好用，按需调用，哈哈

扩展二：关于ul->li设置 display:inline-block之后出现的中间的空白间隙解说和解决，其他元素设置inline-block同理。

解说：这个空白间隙呢其实是代码在解析时把li之间的换行当作一个空格进行了解析。虽然这个空白小间隙可能没什么影响，但如果需要用inline-block制作一个导航条，中间出现一道间隙是不是特丑。而且对于像素的精确度也会有一定影响。

解决：最常用的解决办法就是——在ul中将空白符的字体大小设置为0，然后再根据优先级设置li的字体大小。