inline-block：比float更简单的布局方式
2019-02-19 本文已影响0人
一只水木子
当你想要创建多个网格来铺满浏览器的时候，我们可以使用
float来实现这样的布局。
不过我们有更简单的布局方式：display:inline-block，同样可以达到一样的效果。ヽ(✿ﾟ▽ﾟ)ノ好耶
举个栗子（直接上代码）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>inline-block</title>
<style>
code{
background-color: #f6f6f6;
color: #c7254e;
padding: 2px 4px;
}
.box{
width: 95%;
border: 1px solid #6ac5ac;
float: left;
margin: 30px;
padding: 5px;
}
div[class*="box-"]{
width: 200px;
height: 100px;
background: #6ac5ac;
margin: 1em;
}
.box-item{
float: left;
}
.box-item2{
display: inline-block;
}
.item{
border: 3px solid #FDC72F;
padding: 5px;
}
.item-after{
clear: both;
}
</style>
</head>
<body>
<div class="box">
<h3><code>float:left</code></h3>
<div class="box-item"></div>
<div class="box-item"></div>
<div class="box-item"></div>
<div class="box-item"></div>
<div class="box-item"></div>
<div class="box-item"></div>
<div class="box-item"></div>
<div class="box-item"></div>
<div class="box-item"></div>
<section class="item item-after">我使用了clear，所以我不会浮动到上面的盒子上</section>
</div>
<div class="box">
<h3><code>display:inline-block</code></h3>
<div class="box-item2"></div>
<div class="box-item2"></div>
<div class="box-item2"></div>
<div class="box-item2"></div>
<div class="box-item2"></div>
<div class="box-item2"></div>
<div class="box-item2"></div>
<div class="box-item2"></div>
<div class="box-item2"></div>
<section class="item">我不用clear也可以达到一样的效果</section>
</div>
</body>
</html>
效果图：
float和inline-block布局
如果，当我们注释掉.item-after{ clear: both; }，不难发现就会出现这样的移位：
注释掉.item-after{ clear: both; }的效果
相比之下，
inline-block方法我们只用到
.box-item2{
display: inline-block;
}
而float方法则需要用到
.box-item{
float: left;
}
.item-after{
clear: both;
}
(๑•̀ㅂ•́)و✧学完这块，我们可以进一步了解flexbox布局
