在網頁制作中，我們經常會使用CSS來控制頁面的樣式，其中一個比較常用的效果就是上下浮動的DIV元素。接下來，我們將一步步實現該效果。

/* 設置浮動元素的樣式 */
.float-wrapper {
width: 400px; /* 設置容器寬度 */
margin: 0 auto; /* 居中顯示 */
overflow: hidden; /* 清除浮動 */
background-color: #fff; /* 設置容器背景色 */
}
.float {
width: 100px;
height:100px;
background-color: #f00;
margin: 10px;
float: left; /* 左浮動 */
}
.float1 {
float: right; /* 右浮動 */
}

上面的代碼中，我們首先定義了一個浮動元素的樣式，即使用一個DIV容器來裝載需要浮動的DIV元素。其中，容器的寬度設置為400像素，居中顯示，并設置了背景色。因為我們將通過使用浮動來實現上下浮動的效果，故而必須清除浮動，以避免出現意外的顯示效果，例如有些元素突然掉到下方等。

接下來，我們定義了兩個需要浮動的元素，即.float和.float1兩個類名。這兩個元素都設置了寬度和高度為100像素，背景色為紅色。不同之處在于，.float元素是左浮動的，而.float1元素則是右浮動的。這樣，它們就會在同一行中同時浮動，而.float1元素則會在瀏覽器窗口的右邊上下浮動。

現在，我們只需要將兩個浮動的DIV元素放入之前定義的DIV容器中，即可完成浮動的效果：

使用上述代碼，在瀏覽器中運行，我們將得到一個帶有上下浮動DIV元素的頁面。除了上下浮動外，我們還可以通過CSS控制元素的位置、大小、顏色等屬性，使得頁面效果更加豐富多彩。