当我们需要把一些块状元素在一行排列显示时，我们通常会用到float或者inline-block。那么他们有什么共性和区别？适用在什么场景？
共性：
-
inline-block: 是把一个元素的display设置为块状内联元素。
- inline属性使元素内联展示，内联元素设置宽度无效，设置上下padding、margin无效。相邻的inline元素会在一行显示不换行，直到本行排满为止。
- block的元素始终会独占一行，呈块状显示，可设置宽高。
- 所以inline-block的元素就是宽高可设置，相邻的元素会在一行显示，直到本行排满，也就是让元素的容器属性为block，内容为inline。
float： 设置元素的浮动为左或者右浮动，当设置元素浮动时，相邻元素会根据自身大小，排满一行，如果父容器宽度不够则会换行。当我们设置了元素的浮动时，这个元素就脱离了文档流，相邻元素会呈环绕装排列。
两者共同点是都可以实现元素在一行显示，并且可以自由设置元素大小。
区别：
inline-block: 水平排列一行，即使元素高度不一，也会以高度最大的元素高度为行高，即使高度小的元素周围留空，也不回有第二行元素上浮补位。可以设置默认的垂直对齐基线。inline-block的元素仍然在仍在文档流中占据位置。
float: 让元素脱离当前文档流，呈环绕状排列，如遇上行有空白，而当前元素大小可以挤进去，这个元素会在上行补位排列。默认是顶部对齐。脱离文档流。
使用场景：
inline-block： 当我们要设置某些元素在一行显示，并且排列方向一致的情况下，我们尽可能去用inline-block。
因为inline-block的元素仍然在仍在文档流中占据位置。，这样就减少了程序对DOM的更改操作，因为DOM的每一次更改，浏览器会重绘DOM树。会增加性能消耗。这样也不用像flaot那样麻烦，需要清除flaot.float： 即使inline-block为布局首选，但是也有inline-block所不能涉及的一些业务需求，比如：有两个元素，我们需要一个向左，一个向右排列，这时候我们就只能用float来实现。
使用float时需要注意浏览器的解析顺序是逐行解析，当设置两个元素的右浮动时，顺序在前面的元素会先被解析。
