DIV+CSS是WEB設計標準，它是一種網頁的佈局方法。與傳統中通過表格（table）佈局定位的方式不同，它可以實現網頁頁面內容與表現相分離。
本經驗會讓大家對如何使用DIV實現網頁佈局有一個初步的認識。
方法/步驟
DIV+CSS的重點就是浮動+佈局，因為DIV只能縱向排列，而通過使用浮動就能使DIV橫向排列，從而使網頁佈局變得豐富多樣。
開始學習之前，還有一個要重點弄明白的，便是盒子模型，弄懂了盒子模型，才能讓我們設計的網頁佈局不會亂糟糟的。
盒子模型分為標準盒子模型（w3c盒子模型）、IE盒子模型。
標準盒子模型的計算方式如圖所示：
IE盒子模型的計算方式如圖所示：
既然有兩種盒子模型，那麼該用哪種來進行網頁佈局呢？當然是使用w3c的標準盒子模型，而不是IE盒子模型。為了不讓我們用標準盒子模型設計的網頁在IE上解析出現問題，需要在網頁文件的頂部添加如圖紅色區域內的聲明。
如此一來，所有瀏覽器都會按照w3c標準盒子模型來解析當前網頁。
步入正題，先來一個最簡單的佈局，添加3個寬400px、高200px的div。因為div是塊級元素，在只設置width和height的情況下，三個div會依次垂直堆放，如圖所示：
接下來，我們將div加上浮動，添加3個寬200px、高200px的div。在設置了float屬性後，這三個div會依次從左到右橫向排列，如圖所示：
稍微加點難度，可以將途中這個佈局看成：最外面一個寬度為900px的大盒子，
大盒子裡面有三個小盒子，分別是最上面的寬900px、高200px的小盒子1和下面兩個寬450px、高300px的小盒子2、3。
也就是說，這個佈局總共由4個DIV組成，最外面一個box，box裡面包含了1、2、3。
因為box的寬度是900px，1的寬度是900px，已經將box的寬度填滿了，2和3會自動往下排列。為了讓2和3橫向排列，只要給2和3都加上浮動就行了，即設置float：left。
將如圖所示的這個佈局用div+css實現了的話，那就已經完全理解了如何用div+css進行網頁佈局。
下圖就是對上圖佈局的一種分解方式：先定義一個最大的div，即棕色框；然後在棕色框裡定義4個綠框；再在中間的2個綠色框中分別定義3個黃色框，黃色框要加float屬性；最後在中間的2個黃色框中分別定義2個灰色框。
小技巧：用div+css的方式佈局網頁，最好是先將網頁分解成幾個大模塊，再在每個大模塊中添加小模塊。而且最好是先將每個部分都添加背景色，確定佈局都出來後，再在div中添加內容。