在咱们平时工做中，常常会遇到把一些块状元素在一行排列显示，这时候咱们一般会用到flaot,或许会用inline-block等等，那么他们有什么共性和区别？适用在什么场景？浏览器
共性：布局
①inline-block: 是把一个元素的display设置为块状内联元素，意思就是说，让一个元素的容器inline展现，而且里面的内容block展现；inline属性使元素内联展现，内联元素设置宽度无效，相邻的inline元素会在一行显示不换行，直到本行排满为止。block的元素始终会独占一行，呈块状显示，可设置宽高。因此inline-block的元素就是宽高可设置，相邻的元素会在一行显示，直到本行排满，也就是让元素的容器属性为block，内容为inline。性能
②float： 设置元素的浮动为左或者右浮动，当设置元素浮动时，相邻元素会根据自身大小，排满一行，若是父容器宽度不够则会换行。当咱们设置了元素的浮动时，这个元素就脱离了文档流，相邻元素会呈环绕装排列。调试
二者共同点是均可以实现元素在一行显示，而且能够自由设置元素大小。文档
区别：容器
①inline-block: 水平排列一行，即便元素高度不一，也会以高度最大的元素高度为行高，即便高度小的元素周围留空，也不回有第二行元素上浮补位。能够设置默认的垂直对齐基线。float
②float: 让元素脱离当前文档流，呈环绕装排列，如赶上行有空白，而当前元素大小能够挤进去，这个元素会在上行补位排列。默认是顶部对齐。程序
场景：新手
①inline-block： 当咱们要设置某些元素在一行显示，而且排列方向一致的状况下，咱们尽量去用inline-block。由于inline-block的元素仍然在当前文档流里面，这样就减小了程序对DOM的更改操做，由于DOM的每一次更改，浏览器会重绘DOM树。理论上会增长性能消耗。这样也不用像flaot那样麻烦，须要清除flaot.di
②float： 即便inline-block为布局首选，可是也有inline-block所不能涉及的一些业务需求，好比：有两个元素，咱们须要一个向左，一个向右排列，这时候咱们就只能用float来实现，对于新手来讲，会纠结float很差调，比较麻烦，想到达到预期效果，须要屡次调整，有时候咱们给元素设置了浮动，元素显示的顺序却变了，一时搞不清楚就改变HTML中元素的先后顺序等等。由于浏览器的解析顺序是逐行解析，当设置两个元素的右浮动时，顺序在前面的元素会先被解析，他是右浮动，那么在前边的元素就先往右浮动占位置，后边的元素依次被解析到之后，才往右排列，这样咱们看到的顺序就是反的，当弄明白缘由以后，调试就方便多了。