Web頁面是由塊元素組成的，正常情況下塊元素一個個按垂直方向排布，構成了頁面。
可是這樣的主要的布局方式絕大多時候不能滿足我們的需求。所以各種布局方式應運而生。本文就對這些布局方式做個小結。
1、元素漂移
把一個元素從頁面流中移走。漂移到某個方向，其他塊元素會置於這個元素以下，當有內聯元素注入其他塊元素時。內聯元素會圍繞着這個元素
#amazing{
width: 200px;
float: right;
}
如圖：
假設其它元素要避開這個元素
#footer{
clear: both;
}
如圖：
2、凍結布局
元素還保留在頁面流中，鎖定這個元素，凍結在頁面上。不論放大還是縮小窗體，這個元素的大小不變
#allcontent{
width: 800px;
}
如圖：
3、凝膠物布局
鎖定頁面中內容區的寬度。把它放置在瀏覽器中央
#allcontent{
width: 800px;
margin-left: auto;
margin-right: auto;
}
如圖：
4、絕對布局
把一個元素從頁面流中移走，並漂浮固定在頁面的某個位置。
#sidebar{
position: absolute;
top: 128px;
right: 480px;
}
如圖：
5、固定布局
把一個元素從頁面流中移走，並漂浮固定在窗體的某個位置。
#coupon{
position: fixed;
top: 300px;
left: 100px;
}
如圖：
6、相對布局
元素還保留在頁面流中，但在頁面顯示之前把元素偏移到指定的位置。原來的位置由於還在流中。所以不會被其它元素占位。
.beanheading img{
position: relative;
right:120px;
}
如圖：
（完）