在網站設計的過程中，布局在其中起著重要的作用。而CSS的常用布局規則可以幫助我們輕松地完成網站的布局。下面本文將介紹幾種常見的CSS布局規則。

1. 浮動布局

float: left;
float: right;

浮動布局可以讓元素向左或向右浮動，讓元素進行自動排布。在使用浮動布局時，需要注意父元素應該設置overflow: hidden來清除浮動。

2. 定位布局

position: absolute;
position: relative;

定位布局可以使元素被相對于其祖先元素進行定位。通過設置元素在頁面中的位置，從而達到需要的效果。在使用定位布局時，需要注意祖先元素的定位方式以及元素的定位方式。

3. 網格布局

display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 50px 50px;

網格布局可以讓頁面元素按照網格進行布局。通過設定每一行和每一列的大小，從而控制網格的大小。在使用網格布局時，需要注意設定網格的大小以及元素的位置。

4. 彈性盒子布局

display: flex;
flex-direction: row;
justify-content: center;
align-items: center;

彈性盒子布局可以允許元素在容器內自由伸縮。通過設定元素所在容器的方向，以及元素在容器中的位置和對齊方式，從而完成布局。在使用彈性盒子布局時，需要注意設定布局方向以及元素的位置和對齊方式。

總之，通過使用上述幾種常見的CSS布局規則，可以使我們在網頁設計中輕松實現需要的布局效果。