早期我們對網頁的排版設計都是用table來編排，不過後來發現這樣跑起網頁來太慢了，程式碼也複雜很多，因此，現在大家都是使用CSS加上div標籤做版面的設計。
前面還沒有提過的div標籤，就是把網頁裡的東西分成一塊一塊的，簡單來說就是:
<div>內容</div>
只要是放在<div>和</div> 裡面，我們都會把它視為一個物件，在設計網頁的排版時，一個一個物件也會相對方便很多(就像搬家的時候裝箱的道理一樣)。

當然，無論div裡面裝的是文字還是圖片，我們都可以自行決定區塊的長寬大小位置等等。

<div id='test'>div範例</div>

<style>
    #test{backdround-color: yellow;
          width: 500px;
          height: 250px;
    }
</style>

有時候我們會連續寫幾個div標籤，不過值得注意的是div屬於獨立的區塊，也就是說單獨一個div就會占一整行的空間，所以在執行程式碼時每個div區塊會以由上往下的方式排列。
如果希望兩個div可以左右並排顯示的話，可以使用float語法:

<div id='test1'>內容1</div>
<div id='test2'>內容2</div>
<style>
    #test1{
         float: left;
    }
    #test2{
        float: left;
    }
</style>

float屬性可以決定區塊要靠哪個方向浮動(float)，像本範例就是使兩個div都靠左浮動，這樣就能讓兩個div以水平的方式呈現了。
喔對了，如果寬度夠的話，甚至可以好幾個div並排出現喔!