display: inline-block与float:left

转载自：http://blog.sina.com.cn/s/blog_5f39af320101qckt.html

 

什么时候使用inline-block，什么时候使用float

什么时候使用，取决于你的设计稿跟解决方法。如果你需要文字环绕容器，那浮动是不二选择。如果你需要居中对齐元素，inline-block是个好选择。

最终，这可以归结为float跟inline-block的两种属性作用后的区别，你需要对其作出选择。

1. 使用inline-block：当你需要控制元素的垂直对齐跟水平排列时，使用inline-block。
2. 使用浮动：当你需要让元素环绕某一个元素时，或者需要支持旧版本ie，或者不想处理inline-block带来的空白问题时，使用浮动。

上图，把一系列元素设置了浮动，因为盒子二号宽度的关系，可以发现盒子五号被挤进去了（这些元素都脱离了文档流），这是图片排列中很常见的问题。

浮动、inline-block和图像排列

我使用inline-block主要是为了处理垂直对齐问题。我想这也是很多人使用这个属性的原因。我制作的很多站点都不可避免的带有一些图片列表。

若父元素中的图片等高，设置浮动就会工作正常。但一旦有一列图片比较高时，图片的排列就会出现问题。这是因为浮动后，图片脱离了文档流。

而inline-block由于未脱离文档流，不会出现这个问题。如果你想再创建一列图片时，不会受到上一列图片inline:block的影响。而你在使用时需要时刻注意清除浮动，当内容不断变化时这很容易产生bug。

这里有个更明显的例子来体现inline-block跟float的区别：

我制作了一个demo来展示一下两个写法效果的区别

上面的块级元素被设置了inline-block。由于他们没有脱离文档流，所以元素不会被某个过长的列挤上来。

inline-block导航

另一种inline-block的适用场景：横向导航栏。通常，我们一般会设置a元素display：block然后进行浮动来制作。有时候我会直接通过对列表元素设置display:inline来制作。如果在制作中，你需要设置不同的display属性来处理浮动，那么inline-block不失为一种更好的解决方案。

当你需要将元素排列成一行或者多行时，更倾向于考虑使用inline-block代替float。当然，直接使用table也是一种方法，他毕竟是专门用来处理横向与纵向排列的元素的。

如果你需要创建一个很复杂的包含行列的布局，table是你的最佳选择，不过你同样也可以考虑inline-block

总结

我们经常使用浮动，但浮动并不是唯一的解决方案。有时候inline-block会更好，特别是你想排列一些图片，或者横向排列链接时。

Inline-block元素带有一些行内元素的特征（横向排列），同时内部也拥有块级元素的属性。这个跟浮动很类似，只不过有些区别。

这些区别决定了你该使用哪种方案。如果你很纠结垂直对齐问题或者横向排列元素，不妨使用inline-block。如果你需要对一个元素跟围绕他的一些元素进行更多控制，你需要浮动。

当然，table也是你处理一些问题的最佳方案。

同样我想说的，这不是什么新东西，但我会通过这篇文档还有demo来介绍一些应该使用但有些人尚未使用inline-block的场景。

项目demo：

    #columnContent .item_ul>li
    { 
        flaot:left;
        width:203px;
        margin:3px 5px;
        vertical-align:top;
        text-align:left;
            }

效果

菜单居中和自适应需要根据页面的宽度计算

css:   

    #columnContent .item_ul>li
    {
        display:inline-block;
        width:203px;
        margin:3px 5px;
        vertical-align:top;
        text-align:left;
       
        *display:inline;   
        zoom:1;
     }
菜单用ul-li标签水平排列流状显示，float:left也可实现同样的显示效果，但是float时撑开一个li标签，其他li标签会环绕，特别注意和学习float和inline-block的区别，特殊情况下利用inline-block的特殊性可以实现别样的效果

上面是在实际项目中应用，要求实现后面一张图的效果，起初li标签用的是float:left，整体样式没问题，但是展开li标签内容时，其他li标签环绕，这里又存在自适应，当页面缩小时，每行的li标签个数会减少，并且居中，曾经做过自适应和居中的计算以及考虑用table布局，现在回过头太悲区了，inline-block只需替换一个浮动样式就都解决了，细节和差异理解透彻了，才能做出更好的效果和节省更多不必要的时间