使用浮动布局还是inline-block布局？_为什么不用inline-block-优快云博客

本文链接：https://blog.youkuaiyun.com/wmaoshu/article/details/53024145

本文对比了浮动布局和inline-block布局的相似之处和差异，包括它们在文档流中的排版方式、对元素的影响、布局方向等。浮动布局可能导致元素排列混乱，需要清理浮动来避免影响，而inline-block布局可能存在空白节点问题。通过实例分析，展示了如何使用inline-block作为浮动布局的替代方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在上篇博客中对浮动做了介绍
http://blog.youkuaiyun.com/wmaoshu/article/details/52995912
浮动存在的问题也是很明显的，首先他会脱离文档流对父元素兄弟节点和孩子节点都有影响，那么为了实现对浮动布局的替代，那么我的考虑是使用inline-block。

浮动和inline-block他们在文档流中排版方式相似，但是inline-block是基线对齐，浮动是与所在的行框top对齐，同时他们对于width的计算都一样都是“自适应（shrink-to-fit）”并且margin为auto的时候都会定义为0。浮动和inline-block对于所构造的子元素的环境都是BFC。

区别就是在于浮动对其他元素造成影响但是浮动却不会，同时浮动可以向左向右浮动，inline-block的布局方向由文本的方向决定。同时一行几个浮动元素不存在行框的概念，所以对于不同高度的元素，可能会使得布局发生混乱，所以对于多了浮动元素，可能明确的确定这些浮动元素的height一致，但是inline-block元素元素外部的布局和行元素类似，所以根据行框形成的原理（行框的顶部回和最高的行框顶部对齐，行框额底部会和最低的行内框的底部对齐）

对于浮动存在的问题，就是要对其他受影响的元素通过清理浮动减少对他们的影响，同时inline-block由于本质属于行内内容，所以可能会有莫名的空白节点问题的存在，所以他们都要对附带的产生的问题济宁解决。

举例说明集中替代的方案。

例一:百度布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    a {
        text-decoration:none;
    }
    p {
        margin: 0;
        padding: 0;
    }
        .clearfloat:after{
            content: "";
            display: block;
            clear: both;
            height: 0;
            visibility: hidden;
        }
        .box {
            display: inline-block;
            margin: 0 auto;
        }
        .row {
            border: 2px solid;
        }
        .row+.row {
            margin-top: 20px;
        }
        .cell {
            width: 75px;
            border: 1px solid;
            float: left;
        }
        .cell + .cell {
            margin-left: 20px;
        }
        img {
            width: 75px;
            height: 75px;
        }
        .name,.recom {
            text-align: center;
            margin-top: 5px;
        }
        .name {
            margin-top: 5px;

        }
        .recom {
            color: #999;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="row clearfloat">
            <div class="cell">
                <div class="img"><a href="#"><img src="images/image.jpg"></a></div>
                <div class="name"><a href="#">文字文字文字文字</a></div>
                <div class="recom"><p>文字文字文字文字</p></div>
            </div>
            <div class="cell">
                <div class="img"><a href="#"><img src="images/image.jpg"></a></div>
                <div class="name"><a href="#">文字文字</a></div>
                <div class="recom"><p>文字文</p></div>
            </div>
            <div class="cell">
                <div class="img"><a href="#"><img src="images/image.jpg"></a></div>
                <div class="name"><a href="#">文字文字文字</a></div>
                <div class="recom"><p>文字文文字文</p></div>
            </div>
        </div>
        <div class="row clearfloat">
            <div class="cell ">
                <div class="img"><a href="#"><img src="images/image.jpg"></a></div>
                <div class="name"><a href="#">文字文字文字</a></div>
                <div class="recom"><p>文字文</p></div>
            </div>
            <div class="cell">
                <div class="img"><a href="#"><img src="images/image.jpg"></a></div>
                <div class="name"><a href="#">文字文字文字文字</a></div>
                <div class="recom"><p>文字文文字文文字文文字文</p></div>
            </div>
            <div class="cell">
                <div class="img"><a href="#"><img src="images/image.jpg"></a></div>
                <div class="name"><a href="#">文字文字文字文字文字文字</a></div>
                <div class="recom"><p>文字文文字文文字文文字文文字文文字文</p></div>
            </div>
        </div>
    </div>
</body>
</html>

这里写图片描述
上述代码所示，由于列表项浮动，所以对于每一个列表的height不同显然不能在一个row中，否则可能由于浮动的特性会靠在另一个浮动的旁边，所以要加一个外框来限制布局。同时还要让row外面的边框清浮动。上述没有给cell元素明确width值，这利用了浮动的width收缩的特性。

Inline-block版本：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    a {
        text-decoration:none;
    }
    p {
        margin: 0;
        padding: 0;
    }

    .box {
        display: inline-block;
        width:285px;
        border: 1px solid;
        padding-left: 20px;
        font-size: 0; /*解决空白节点文字  否则可能影响布局*/
    }
    .cell {
        display: inline-block; /*行内块化*/
        width: 75px;  
        /*根据inline-block和浮动的宽都具有“自适应收缩性”并且子元素存在文字描述，所以要明确的设置*/
        vertical-align: top; /*与浮动不同默认为baseline所以要设置top*/
        margin-right:20px; 
        font-size: 16px;  /*覆盖上述的设置*/
    }
    img {
        width:75px;
        height:75px;
    }
    .name,.recom {
        text-align: center;
        margin-top: 5px;
    }
    .recom {
        color: #999;
    }
    </style>
</head>
<body>
    <div class="box">
            <div class="cell">
                <div class="img"><a href="#"><img src="images/image.jpg"></a></div>
                <div class="name"><a href="#">文字文字文字文字</a></div>
                <div class="recom"><p>文字文字文字文字</p></div>
            </div>
            <div class="cell">
                <div class="img"><a href="#"><img src="images/image.jpg"></a></div>
                <div class="name"><a href="#">文字文字</a></div>
                <div class="recom"><p>文字文</p></div>
            </div>
            <div class="cell">
                <div class="img"><a href="#"><img src="images/image.jpg"></a></div>
                <div class="name"><a href="#">文字文字文字</a></div>
                <div class="recom"><p>文字文文字文</p></div>
            </div>


            <div class="cell ">
                <div class="img"><a href="#"><img src="images/image.jpg"></a></div>
                <div class="name"><a href="#">文字文字文字</a></div>
                <div class="recom"><p>文字文</p></div>
            </div>
            <div class="cell">
                <div class="img"><a href="#"><img src="images/image.jpg"></a></div>
                <div class="name"><a href="#">文字文字文字文字</a></div>
                <div class="recom"><p>文字文文字文文字文文字文</p></div>
            </div>
            <div class="cell">
                <div class="img"><a href="#"><img src="images/image.jpg"></a></div>
                <div class="name"><a href="#">文字文字文字文字文字文字</a></div>
                <div class="recom"><p>文字文文字文文字文文字文文字文文字文</p></div>
            </div>
    </div>
</body>
</html>