使用浮动布局还是inline-block布局？

来源：互联网发布：百度卫士软件管理中心编辑：程序博客网时间：2024/05/17 06:19

在上篇博客中对浮动做了介绍
http://blog.csdn.net/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>

这里写图片描述
使用inline-block方式，可以实现浮动的效果，但是要处理空白节点的问题。具体在代码中已经明确说明了。

0 0