當(dāng)你想要?jiǎng)?chuàng)建多個(gè)網(wǎng)格來鋪滿瀏覽器的時(shí)候伪冰，我們可以使用
float來實(shí)現(xiàn)這樣的布局梦裂。
不過我們有更簡單的布局方式：display:inline-block音榜，同樣可以達(dá)到一樣的效果稚叹。ヽ(??▽?)ノ好耶
舉個(gè)栗子（直接上代碼）：
<!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，所以我不會(huì)浮動(dòng)到上面的盒子上</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也可以達(dá)到一樣的效果</section>
</div>
</body>
</html>
效果圖：
float和inline-block布局
如果槽卫，當(dāng)我們注釋掉.item-after{ clear: both; }，不難發(fā)現(xiàn)就會(huì)出現(xiàn)這樣的移位：
注釋掉.item-after{ clear: both; }的效果
相比之下胰蝠，
inline-block方法我們只用到
.box-item2{
display: inline-block;
}
而float方法則需要用到
.box-item{
float: left;
}
.item-after{
clear: both;
}
(??????)??學(xué)完這塊歼培，我們可以進(jìn)一步了解flexbox布局
