可以创建很多网格来铺满浏览器。在过去很长的一段时间内使用是一种选择，但是使用float
会更简单。inline-block
使用浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>float VS inline-block</title>
<style>
.box{
float: left;
width: 200px;
height: 100px;
margin: 1em;
border: solid yellow 1px;
}
.after-box {
clear: left;
border: solid greenyellow 1px;
}
</style>
</head>
<body>
<div class="box">我在浮动！</div>
<div class="box">我在浮动！</div>
<div class="box">我在浮动！</div>
<div class="box">我在浮动！</div>
<div class="box">我在浮动！</div>
<div class="box">我在浮动！</div>
<div class="box">我在浮动！</div>
<div class="box">我在浮动！</div>
<div class="box">我在浮动！</div>
<div class="box">我在浮动！</div>
<div class="box">我在浮动！</div>
<div class="after-box">我在使用 clear，所以我不会浮动到上面那堆盒子的旁边。</div>
</body>
</html>
使用 inline-block
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>float VS inline-block</title>
<style>
.box2 {
display: inline-block;
width: 200px;
height: 100px;
margin: 1em;
border: solid yellow 1px;
}
div {
border: solid greenyellow 1px;
}
</style>
</head>
<body>
<div class="box2">我是一个行内块！</div>
<div class="box2">我是一个行内块！</div>
<div class="box2">我是一个行内块！</div>
<div class="box2">我是一个行内块！</div>
<div class="box2">我是一个行内块！</div>
<div class="box2">我是一个行内块！</div>
<div class="box2">我是一个行内块！</div>
<div class="box2">我是一个行内块！</div>
<div class="box2">我是一个行内块！</div>
<div class="box2">我是一个行内块！</div>
<div class="box2">我是一个行内块！</div>
<div>这次我可没有用 clear 。太棒了！</div>
</body>
</html>
inline-block布局实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>inline-block layout</title>
<style>
nav {
display: inline-block;
vertical-align: top;
width: 25%;
border: solid red 1px;
}
.column {
display: inline-block;
vertical-align: top;
width: 70%;/*由于当前未处理元素间隙，故先设置为70%*/
border: solid red 1px;
}
section {
border: solid yellow 1px;
}
div{
border: solid green 1px;
}
</style>
</head>
<body>
<div class="container">
<nav>
<ul>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >aaa</a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >aaa</a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >aaa</a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >aaa</a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >aaa</a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >aaa</a></li>
</ul>
</nav>
<div class="column">
<section>Tada!</section>
<section>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</section>
</div>
</div>
</body>
</html>