在日常工作中，会经常遇到两个或多个元素并排排列的效果，以前会使用float等实现，float虽然方便好用，但是需要清除浮动，有时会带来意想不到的bug。
1. 如图所示是两个并排的div，均设置为display：inline-block
对齐方式：底部对齐
<div class="demo">
<div class="first"></div>
<div class="second"></div>
</div>
.demo > div{
display: inline-block;
border: 1px solid red;
}
.first{
width: 100px;
height: 100px;
}
.second{
width: 100px;
height: 100px;
}
可以看出，两个div中间有空白间隔，但是代码中没有任何margin，查阅资料发现，这种空白间隔是正常现象
我们的代码中的换行和空格等都会产生这样的间隔，除非我们把代码首尾相连写在一起，但是这样的代码并不容易阅读
还有一个解决办法是设置父元素font-size：0；因为空白字符也是一个字符，只要设置为0，则间隔就消失了。
.demo {
font-size:0;
}
2. 上图是两个空白div，其中并没有任何内容，如果在其中一个div中加入内容，如下：
<div class="demo">
<div class="first"/>1</div>
<div class="second"></div>
</div>
加入内容的div相对以前的位置会偏移很多
或者我们两个div中都加入内容：
对齐方式：顶部对齐
<div class="demo">
<div class="first"/>1</div>
<div class="second">2</div>
</div>
在右边div再多加一些内容:
给右边div设置字体font-size:50px，左边不变:
给右边div加上margin-top：40；左边不变:
给右边div加上加上padding:40px;左边不变:
然后我们发现，无论是设置字体大小，还是设置padding，margin等，两个div一直处在错乱的状态，并没有整齐排列
但是错乱的状态下也是有错乱的规律的，即左边div和右边div中的文字始终处于顶端对齐的状态！！
解决办法:
（1）给左右两边div都加上一句vertical-align：middle；效果如下：
此时，两个div整体以中间对齐，如果两个div高度一致，那自然就底部对齐啦
vertical-align：top；
vertical-align:bottom;
（2）给两个div都加上一句overflow：hidden，效果如下：
此时两个div是底部对齐。
