一天搞定CSS：浮动（float）与inline-block的区别--11

今天药忘吃喽~ 2022-06-16 08:07 161阅读 0赞

**浮动：**

> 使元素脱离文档流，按照指定的方向发生移动，遇到父级的边界或者相邻的浮动元素就会停下来。

**inline-block:**

> inline-block是指行内块元素，它具有行内元素和块元素两者的特点，可以实现对元素的有序排序。

--------------------

**两者的区别**

> 两者主要区别在于当标签的【高度不一致】时，体现出的差异
> 
> **如果高度不一致的情况下，想让他们按顺序排列就可以选择inline-block**

**1）浮动时代码演示**

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                ul{
                    width: 300px;
                    font-size: 0;
                }
                li{
                    list-style: none;
                    width: 100px;
                    height: 150px;
                    background: green;
                    font-size: 40px;
                    text-align: center;
                    line-height: 150px;
                    color: #fff;
                    float: left;
                    /*float: right;*/
                    /*display: inline-block;*/
                }
            </style>
        </head>
        <body>
            
            <ul>
                <li>1</li>
                <li style="height: 200px;">2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ul>
        </body>
    </html>

**效果图：**

![这里写图片描述][SouthEast]

--------------------

**2）使用inline-block时代码演示**

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                ul{
                    width: 300px;
                    font-size: 0;
                }
                li{
                    list-style: none;
                    width: 100px;
                    height: 150px;
                    background: green;
                    font-size: 40px;
                    text-align: center;
                    line-height: 150px;
                    color: #fff;
                    /*float: left;*/
                    /*float: right;*/
                    display: inline-block;
                }
            </style>
        </head>
        <body>
            
            <ul>
                <li>1</li>
                <li style="height: 200px;">2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ul>
        </body>
    </html>

**效果图：**

![这里写图片描述][SouthEast 1]

--------------------

**总结：**

在浮动时，若第一个元素的高度大于第二个元素的高度，第三个元素浮动时，会与第二元素并排在一列中，这样不能出现有序排列了。
    
    在inline-block时，就算第一个元素的高度大于第二个元素的高度，第三个元素也不会与第二个元素排在一列。
    
    【这里第一二三个元素，不是指第一二三个元素，只是为了说明三个元素的关系】

[SouthEast]: /images/20220616/71241f9663834bfc9c748337eba4956b.png
[SouthEast 1]: /images/20220616/9bc0d75a70fc49d68a78b52171aa654a.png