你可以创建很多网格来铺满浏览器。在过去很长的一段时间内使用 float 是一种选择，但是使用 inline-block 会更简单。让我们看下使用这两种方法的例子：
困难的方式（使用浮动）
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.box {
float:left;
width:200px;
height:100px;
margin:1em;
background-color:#6ac5ac;
}
.after_box {
clear:left;
background-color:#d64078;
}
</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）
你可以用 display 属性的值 inline-block 来实现相同效果。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.box {
display: inline-block;
width:200px;
height:100px;
margin:1em;
background-color:#6ac5ac;
}
.after_box {
clear:left;
background-color:#d64078;
}
</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>效果图如下：
你得做些额外工作来让IE6和IE7支持 inline-block 。有些时候人们谈到 inline-block 会触发叫做 hasLayout 的东西，你只需要知道那是用来支持旧浏览器的。如果你对此很感兴趣，可以在前面那个链接中找到更详细的信息。否则我们就继续下去吧。