关于让div放在一行的问题，不使用浮动

实习第一天，导师让我写个页面，按照往常的习惯，让几个div排列在一行就使用了float:left，方便是方便。但是导师说尽量不要使用浮动，让我去思考一下怎么不用浮动让块级元素放置一行。

于是查到了除了使用浮动还有一种方法，就是把子元素都设置为display:inline-block，这样也能完美实现，但是有个缺点有间隙问题。
间隙为4像素，这个问题产生的原因是换行引起的，因为我们写标签时通常会在标签结束符后顺手打个回车，而回车会产生回车符，回车符相当于空白符，通常情况下，多个连续的空白符会合并成一个空白符，而产生“空白间隙”的真正原因就是这个让我们并不怎么注意的空白符。
去除空隙的方法：
　对父元素添加，{font-size:0}，即将字体大小设为0，那么那个空白符也变成0px，从而消除空隙。
　
接下来写一下浮动和inline-block的区别：
1.对元素设置display：inline-block ，元素不会脱离文本流，而float就会使得元素脱离文本流，且还有父元素高度坍塌的效果，所以使用浮动就得会清除浮动。
这里介绍一下清除浮动的三种方法：
①给父级元素设置高度
②给父级设置overflow:hidden
③ 在所有浮动的子元素后加个div设置clear:both
2.浮动的局限性在于，若要元素排满一行，换行后还要整齐排列，就要子元素的高度一致才行，而inline-block就不会。

总结：
a.对于横向排列东西来说，更倾向与使用inline-block来布局，因为这样清晰，也不用再像浮动那样清除浮动，害怕布局混乱等等。
b.对于浮动布局就用于需要文字环绕的时候，毕竟这才是浮动真正的用武之地，水平排列的是就交给inline-block了。