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

浮动：

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

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>
        <!--
            如果高度不一至的情况下，想让他们按顺序排列就可以选择inline-block
        -->
        <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>

效果图：

这里写图片描述

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>
        <!--
            如果高度不一至的情况下，想让他们按顺序排列就可以选择inline-block
        -->
        <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>

效果图：

这里写图片描述

总结：

在浮动时，若第一个元素的高度大于第二个元素的高度，第三个元素浮动时，会与第二元素并排在一列中，这样不能出现有序排列了。

在inline-block时，就算第一个元素的高度大于第二个元素的高度，第三个元素也不会与第二个元素排在一列。

【这里第一二三个元素，不是指第一二三个元素，只是为了说明三个元素的关系】
posted @ 2017-05-10 12:43  TCB_Java  阅读(134)  评论(0)  编辑  收藏  举报