css的display:inline-block和float:left的区别

要解决的问题：今天玩了点前端，想用js(代码就不浪费内存了)制做一个一下的表格：

解决的方法：使用的css样式以下：

 #list li{ 
    border-right:1px solid #fff; 
    border-bottom:1px solid #fff;
    list-style:none; 
    text-align:center; 
    display:inline-block;//由于学到inline-block了就实践下
}

 产生的效果：使用上面的方法，结果怎么设置也设置不成上面那个效果：

遇到的问题：第二行开始border老是不能连续；

解决方法：果断摆渡了一下，原来是使用display:inline-block时vertical-algin候默认为baseline问题所致：

方法一：

 #list li{ 
    border-right:1px solid #fff; 
    border-bottom:1px solid #fff;
    list-style:none; 
    text-align:center; 
    display:inline-block;
    vertical-align:middle;//默认是baseline
}

 方法二：

#list li{ 
    border-right:1px solid #fff; 
    border-bottom:1px solid #fff;
    list-style:none; 
    text-align:center; 
    float:left;//使用浮动
}

 问题深究：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只需替换一个浮动样式就都解决了，细节和差别理解透彻了，才能作出更好的效果和节省更多没必要要的时间。

 内容转载自：http://blog.sina.com.cn/s/blog_5f39af320101qckt.html，纯属学习总结，若有不妥，及时联系删除，谢谢。