1、元素漂移

把一個元素從頁面流中移走，漂移到某個方向，其它塊元素會置于這個元素下面，當有內聯元素注入其他塊元素時，內聯元素會環繞著這個元素

#amazing{

   width: 200px;

   float: right;

}

如圖：

如果其他元素要避開這個元素

如圖：

2、凍結布局

元素還保留在頁面流中，鎖定這個元素，凍結在頁面上，不論放大還是縮小窗口，這個元素的大小不變

如圖：

3、凝膠物布局

鎖定頁面中內容區的寬度，把它放置在瀏覽器中央

如圖：

4、絕對布局

把一個元素從頁面流中移走，并漂浮固定在頁面的某個位置。

如圖：

5、固定布局

把一個元素從頁面流中移走，并漂浮固定在窗口的某個位置。

如圖：

6、相對布局

元素還保留在頁面流中，但在頁面顯示之前把元素偏移到指定的位置，原來的位置因為還在流中，所以不會被其他元素占位。

.beanheading img{

   position: relative;