float、inline-block的使用场景解析以及填坑

网上分析float、inline-block的使用场景已经有很多文章了，我加入我的理解总结一篇比较全而且精炼的。

共性

相邻元素会在一行显示不换行，直到本行排满，就换行显示。

区别

float：

默认顶部对齐。如遇到上行有空白，而当前元素大小可以挤进去，那么这个元素会在上行补位排列。

float会脱离文档流，导致重绘，增加浏览器消耗。

给float的父元素设text-align: center，不会让float居中。

float元素之间会紧贴。

inline-block：

默认基线对齐。当一行内的元素高度不一时，以高度最大的元素高度为行高，即使高度小的元素周围有空，也不会有第二行元素上浮补位。由于元素的容器属性为block，内容为inline，所以可以视为文字，然后通过vertical设置垂直对齐方式。

inline-block不脱离文档流。

给inline-block的父元素设text-align: center，会让inline-block居中。

inline-block元素之间可能会包含html空白节点，这些节点会导致元素之间不紧贴。

推荐使用场景

float：

一、float最初设立的初衷是实现环绕排版，也就是说，第一个子元素设float: left或者float: right，第二个子元素保持在文档流里，这样第二个子元素的内容会环绕第一个子元素排版。

二、当若干子元素居左，若干子元素居右，建议用float。当然，居右的元素如果用position: absolute; right: 0; top: 0;，也是可以的，不过这牵扯到父元素要设relative的问题，而且同样是脱离文档流，float代码更干净。

inline-block：

一、要设置某些子元素在一行或者多行内显示，尤其是排列方向一致的情况下，应尽量用inline-block。因为inline-block的元素仍然在当前文档流里面，这样就减少了程序对DOM的更改操作，因为DOM的每一次更改，浏览器会重绘DOM树，理论上会增加性能消耗。float就会增加性能消耗。

二、希望若干个元素平行排列，且在父元素中居中排列，此时可以用inline-block，且给父元素设text-align: center。还有一种办法是给这若干个元素设一个div父元素，然后给它设宽度，并使用margin: 0 auto。然而，如果考虑到若干个元素需要在窄分辨率下换行，那么inline-block依然是好办法。

三、inline-block可以用一排a {display: inline-block}实现横向导航栏，无论是居左的导航栏还是居右的都适用，尽管用float也可以实现，但是推荐用inline-block实现。

填坑

float：

一、浮动导致父元素高度塌陷的问题：一个block父元素里有一个float元素，那么子元素尽管有高度，但是撑不起父元素的高度，父元素不主动设置高度的话，高度默认为0。但是父元素设定高度是不推荐的做法。

解决方案就是清除浮动法，这个问题是老问题了，办法很多（参见《CSS清除浮动大全共8种方法》），现在无非是找一种最优雅的办法，不考虑IE6/IE7的话，最优的办法是用:after伪类，也就是声明一个类：

.clearfloat:after {
    display:block;
    clear:both;
    content:"";
    visibility:hidden;
    height:0;
}

用的时候给父元素设上 class="clearfloat" 即可。

二、换行后的float会主动填充到前一行比较矮的元素的下面

这个问题就叫做补位排列，实践中无论是瀑布流布局诞生之前还是诞生之后，这种补位排列都没有任何市场，如果想避免这种排列，唯一的办法就是给各个float元素设固定高度。如果实在不想限定float元素的高度，就只能去分析内部的所有子元素，找到那个忽高忽低的子元素，给它设定统一高度即可。

inline-block：

一、空白节点问题，两个inline-block元素之间会有一个缝隙，这往往是不希望见到的，解决办法有很多，网上都可以搜到，不过最简单，且符合语义的，是用注释。例如：

   <a>A</a><!--
--><a>B</a><!--
--><a>C</a><!--
--><a>D</a>

即使是压缩代码之后把注释删掉了，也不会有影响。

如果我真的需要一个缝隙呢？也不要用空白节点，因为它的宽度是不可控的，最关键是代码压缩之后就没了，所以你只需要先加好注释，然后设个margin-right: xpx即可。

二、两个相同高度的inline-block为啥有高有低？

比如：一个inline-block是font-size: 12px; line-height: 2;，另一个是font-size: 16px; line-height: 1.5;。分别分析它俩，会知道它俩占用的高度都是24px，这里没有问题，然而，从视觉上，却看到一个高一个低。为什么同样的高度，会有这种现象？原因是上文说过的，inline-block的vertical-align是baseline，两个元素的baseline位置不一致，导致了这种现象。

显然，两者保证中轴线对齐才是最美观的，我们当然希望中轴线对齐，那么，怎么保证它俩中轴线对齐呢？

很简单，模仿一下float元素，让它俩基于顶线对齐即可，也就是给它们分别设上vertical-align: top;。当然也可以底线对齐，也就是vertical-align: bottom，道理是一样的。

继续：

如果第一个是inline-block，且font-size: 12px; line-height: 2;，旁边还有一个文本元素，并没有第二个inline-block，然后父元素是font-size: 16px; line-height: 1.5;，这时候你会发现父元素的高度不是设想的24px，而是26px，为什么？

也是因为vertical-align的原因。同样的，我们给父元素和子元素都设上vertical-align: top;或者vertical-align: bottom;，然后再看看，父元素的height值就变成了设想的24px。

所以，若干个inline-block的CSS无论是一模一样，还是略有区别，我们现在都掌握了让他们美观对齐的方法。

再多说一句，vertical-align的值有一个middle值，表面上看这才是我们想要的水平线对齐，然而你真的把上文的top换成middle，发现根本不行，因为middle是“元素的中垂点与 父元素的基线加1/2父元素中字母x的高度 对齐。”，蛋疼么？所以不要用middle。

作者：microkof
链接：https://www.jianshu.com/p/fd758e615305
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。