首页 > 代码库 > inline-block和float的共性和区别

inline-block和float的共性和区别

在我们平时工作中,经常会遇到把一些块状元素在一行排列显示,这时候我们通常会用到flaot,或许会用inline-block等等,那么他们有什么共性和区别?适用在什么场景?

 

共性:

①inline-block: 是把一个元素的display设置为块状内联元素,意思就是说,让一个元素的容器inline展示,并且里面的内容block展示;inline属性使元素内联展示,内联元素设置宽度无效,相邻的inline元素会在一行显示不换行,直到本行排满为止。block的元素始终会独占一行,呈块状显示,可设置宽高。所以inline-block的元素就是宽高可设置,相邻的元素会在一行显示,直到本行排满,也就是让元素的容器属性为block,内容为inline。

②float: 设置元素的浮动为左或者右浮动,当设置元素浮动时,相邻元素会根据自身大小,排满一行,如果父容器宽度不够则会换行。当我们设置了元素的浮动时,这个元素就脱离了文档流,相邻元素会呈环绕装排列。

两者共同点是都可以实现元素在一行显示,并且可以自由设置元素大小。

 

区别:

①inline-block: 水平排列一行,即使元素高度不一,也会以高度最大的元素高度为行高,即使高度小的元素周围留空,也不回有第二行元素上浮补位。可以设置默认的垂直对齐基线。

②float: 让元素脱离当前文档流,呈环绕装排列,如遇上行有空白,而当前元素大小可以挤进去,这个元素会在上行补位排列。默认是顶部对齐。

 

场景:

①inline-block: 当我们要设置某些元素在一行显示,并且排列方向一致的情况下,我们尽可能去用inline-block。因为inline-block的元素仍然在当前文档流里面,这样就减少了程序对DOM的更改操作,因为DOM的每一次更改,浏览器会重绘DOM树。理论上会增加性能消耗。这样也不用像flaot那样麻烦,需要清除flaot.

②float: 即使inline-block为布局首选,但是也有inline-block所不能涉及的一些业务需求,比如:有两个元素,我们需要一个向左,一个向右排列,这时候我们就只能用float来实现,对于新手来说,会纠结float不好调,比较麻烦,想到达到预期效果,需要多次调整,有时候我们给元素设置了浮动,元素显示的顺序却变了,一时搞不清楚就改变HTML中元素的前后顺序等等。因为浏览器的解析顺序是逐行解析,当设置两个元素的右浮动时,顺序在前面的元素会先被解析,他是右浮动,那么在前边的元素就先往右浮动占位置,后边的元素依次被解析到以后,才往右排列,这样我们看到的顺序就是反的,当弄明白原因之后,调试就方便多了。

inline-block和float的共性和区别