CSS中关于float和display: inline-block布局的区别详解

当我们想设置几个盒子水平排列时，一般都会想到使用float或者使用display: inline-block。下面就来说一下两者的区别和，各自的优缺点。

 

inline-block和float的区别

 

文档流:浮动元素会脱离文档流，并使得周围文本元素环绕这个元素。而inline-block元素仍在文档流内，因此inline-block不需要清除浮动的操作。

水平位置：因为浮动元素脱离了文档流，所以在父元素中设置定位元素对其是不生效的，但是设置inline-block的元素依然会受到父元素定位的影响，比如text-align: center，因为其本质上没有脱离文档流。

垂直对齐：inline-block元素是基线对齐，当盒子内有字体时，会根据字体对齐，如果没有字体的话，基线会默认移到盒子的底部，则该盒子会以底部对齐，可以设置vertical来改变默认基线。而float一直都是顶部对齐，使用vertical无法解决。

      （没加字体，基线在最下面）                                                             （有字体，基线在字体下）

 注意：永远以最底部的基线对齐，比如现在第二个盒子有两行字，则左右两个盒子都会向下移，保证基线对齐，反正每次记得加vertical属性解决就行了。

 

inline-block和float各自的优缺点

 

间隙问题：使用inline-block会盒子之间会产生间隙，如下图所示：

                                                                    （inline-block效果图）

这是由于inline-block会将HTML代码中的空格元素算进来，每个div之间的换行符都会导致间隙的产生，而浮动元素是找到前一个盒子的边界才会停止，因此不会有间隙问题。

                                                                           （float: left效果图）

解决间隙的办法：

                     1.删除div元素之间的空格（代码看起来不美观，不推荐）

                     2.使用负边距来补齐间隙（margin: -0.25em;）

                     3.将盒子的font-size属性设置为0，但盒子内的子元素需要重新设置font-size。

 

图像排列问题：若各个盒子的高度相同，则两种处理方式盒子的排列情况一样，但是当盒子高度不一时，inlin-block是严格按照从左到右来排列的，即当第一行的位置容不下时，盒子会从第二行的最左边开始排列，如下图所示。

                    

但是float的情况则有所不同，如下图所示

可以看到黑色盒子并不会贴到最左边，这和float元素找位置的原理有关，每个float盒子定位都是依据上一个盒子的右边界来定位的，每个盒子都会往前查找，知道碰到页面边界，而上图的黑盒子往前查找，找到金色盒子，但是没有碰到它的边界，所以再往前找，就碰到红色盒子的边界，所以就停在了这里。

这两种情况各有各的优点，可以根据实际需要来选择使用。

父元素坍塌问题：大家应该知道，对于一个元素来说，不给他固定高度的时候他的高度是由内容撑开的，也就是说，如果这个元素里面没有任何内容，他的高度就是0，当这个元素有内容的时候，他就有了高度（也就是内容的高度），这也就导致了float元素的这个问题，当元素设置了float之后，它就脱离了文档流，也就是说此时父元素不再包含它，如果这时候盒子内没有其他元素的话，父元素的高度就会变为0。

     （子元素设置浮动前）                       （子元素设置浮动后）

解决办法：

                 1.给父元素设置高度（调整子元素高度时可能也伴随着父元素高度的修改）

                 2.给父元素也设置浮动（其他的不浮动元素会受到影响）

                 3.给父元素添加overflow：hidden；（该方法的原理是让父元素紧贴其内容（包括浮动元素的内容），但有内容要以溢出形式显示时，则会被一同隐藏）

                 4.通过伪类来实现，在需要清除浮动的父元素里，添加一个清除浮动的伪类（完美方法）

                          

 .box:after{
        content:"";
        display:block;
        clear:both;
                }

使用场景：有的时候我们需要对高矮不一的图片进行排列，这时候就应该用inline-block，还有制作横向导航栏时，用inline-block也会更好，因为不必处理浮动。其实两种方法都各有好处，根据自己的需求来即可，但是在一些易出问题的点子上要注意处理，比如上面的父元素坍塌问题。

 

参考的blog：https://www.w3cplus.com/css/inline-blocks.html