让块元素在同一行显示的方法： float 和inline-block

float:

定义：按照一个指定的方向移动，遇到父级的边界或者相邻的浮动元素就会停下来（不完全脱离文档流）

值： left、right、none

特点：

1、浮动的块元素可以在一行显示，宽度是被内容撑开的
2、浮动的行内元素支持宽高
3、非浮动元素里的内容会留出前面浮动元素的位置(盒模型的位置)
4、浮动的子元素不会撑开其父元素的高度，所以换行、空格也不会影响父元素（要撑开父元素的话需要在父元素最后增加一个清楚左右浮动的子元素clear: both; after伪类清除浮动）

.clearfix:after{
                content: '';
                display: block;
                clear: both;
 }

 

inline、inline-block:
把换行代码解析成一个空格

 

display:inline-block; 行内块元素
特征：
1、行内块元素支持宽高
2、行内块元素可以在一行显示
3、不给宽高的话，宽度会由内容撑开
4、代码换行会被解析成一个空格
5、IE6、7不支持块元素的inline-block

6、行内块元素没有脱离文档流，所以能撑开父元素

IE6、7不认识inline-block，给行内元素加上这个属性后会触发IE的haslayout特点，会让行内元素具有与inline-block一样的特征，所以它不支持块元素的inline-block

 

 

 inline-block与float的区别：

如果高度不一至的情况下，想让他们按顺序排列就可以选择inline-block