inline-block不懂为什么出现了上下错位，div1和div2明明定宽了，父元素宽度也够，高度也一样。就是第一个div1加了个overflow：auto就不行了。
想了下，大概因为overflow使得div1变成bfc了。
解决方法：让div2也有overflow属性变成bfc， 或者vertical-align：middle
块状的布局一般有浮动布局和inline-block布局两种。
浮动布局就是float咯，但是如果每个div高度不一样，比如一行三个div，中间那个高了点，就容易出现下一行只有一个div，被卡在最右边这种支离破碎的布局。
所以浮动布局要定宽高。
inline-block布局就是要兼容ie6，7咯。这个也是定宽高比较好，在ie下的解决方法就是触发haslayout，和高级浏览器的bfc差不多。
原文：http://www.cnblogs.com/cjy1993/p/3938985.html