inline-block和float 布局的选择

浮动通常表现正常，但有时候搞起来会很纠结。特别是处理内部容器中的浮动，比如对一排图片使用浮动后对齐出现问题。Inline-block是我们的另一种选择。使用这种属性可以模拟部分浮动的特征，而不需要处理一些浮动带来的问题。

Inline-block 用在展示一系列照片的需求，用inline-block代替了浮动。 

Inline-block :   同时兼有行内 ,,块级 两个 特征。如下:

• 块级元素（block elements） 块级元素包含width height,padding,border与margin，他们的排列方式是从上到下排列。
• 行内元素（inline elements）排列方式是水平排列。
• 行内块元素（inline-block elements）在  元素内部 拥有块元素特征width height,padding,border,margin，元素外部的排列方式有类似行内元素,水平排列 

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

什么时候使用，取决于你的设计稿跟解决方法。 文字环绕容器， 选择浮动。 水平垂直居中对齐元素，选择inline-block。

 

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

 

浮动、inline-block和图像排列

我使用inline-block主要是为了处理垂直对齐问题。 

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

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

 下面是 inline-block跟float的区别：  

上面的块级元素被设置了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的场景。