DIV布局網頁元素的方式主要有三種：平鋪（并排）、嵌套、覆蓋（遮擋）。本文先講解平鋪（并排）方式。

1、垂直平鋪（垂直排列）

請看如下代碼

CSS部分：

HTML部分：

我們看到這里有三個DIV塊，三個DIV塊呈上下并列分布，這種方式就是常見的DIV “ 垂直平鋪方式”，也是最為常見的布局網頁的方式，預覽效果：

我們可以看到網頁中有三個“方塊”呈上下排列。

2、水平平鋪（水平排列）：

我們要讓上例中的三個DIV塊呈水平排列該如何改寫代碼呢？其實只要我們相應的樣式中加一個float:left 即可：

CSS部分：

HTML部分無需任何修改，預覽效果：

這個時候，就把三個DIV塊水平平鋪了。不難吧？