學習 CSS 版面配置
你可以建立一堆區塊自動填滿瀏覽器，在過去很長的一段時間大家都使用 float 來做流動式的自動排版，但現在你可以選擇 display: inline-block 來實作，這方法會更加簡單。使用 display: inline-block 的元素就像 display: inline 的元素一樣，但你可以設定 width 與 height 屬性。讓我們看看以下的例子：
.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
.after-box {
clear: left;
}
我在漂浮！
</div>我在漂浮！
</div>我在漂浮！
</div>我在漂浮！
</div>我在漂浮！
</div>我在漂浮！
</div>我在漂浮！
</div>我在漂浮！
</div>我在漂浮！
</div>我在漂浮！
</div>我在漂浮！
</div>
我使用 clear，所以我不會浮動到上面那堆盒子的旁邊。
你可以用 display: inline-block; 來實現相同效果。
.box2 {
display: inline-block;
width: 200px;
height: 100px;
margin: 1em;
}
我是一個行內元素（inline-block）
</div>我是一個行內元素（inline-block）
</div>我是一個行內元素（inline-block）
</div>我是一個行內元素（inline-block）
</div>我是一個行內元素（inline-block）
</div>我是一個行內元素（inline-block）
</div>我是一個行內元素（inline-block）
</div>我是一個行內元素（inline-block）
</div>我是一個行內元素（inline-block）
</div>我是一個行內元素（inline-block）
</div>
這次我不需要用 clear 屬性了。讚！
要使用 inline-block 你得額外做些事來支援 IE6 和 IE7。有些時候人們談到 inline-block 會觸發所謂 hasLayout 的東西，你只需要知道那是用來支持舊版 IE 瀏覽器用的。如果你對此很感興趣，可以在上面那個超連結中找到更詳細的資訊。否則我們就繼續下去吧。
