在網頁設計中，圖片是非常重要的一個元素，能夠讓頁面更加生動有趣。而CSS中有許多方法可以讓圖片更加自然地融入頁面中，其中之一就是讓圖片上下浮動。

img {
animation-name: float;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes float {
from { transform: translateY(0px); }
to { transform: translateY(-20px); }
}

上述代碼中，我們首先選擇了需要上下浮動的圖片（這里以img標簽為例），然后設置動畫的名稱為float，并且控制了動畫的一些屬性，如持續時間為3秒、循環次數為無限、方向為交替等等。

接下來，我們使用@keyframes關鍵字來定義動畫的具體細節。在這段代碼中，我們通過設置transform的值，讓圖片從初始狀態開始向上移動20像素，從而模擬出了上下浮動的效果。注意，我們使用了from和to來表示動畫開始和結束的狀態，這也可以用百分比來表示。

最后，在HTML中引入這段CSS代碼即可讓圖片上下浮動。這種效果可以讓頁面看起來更加生動有趣，同時也不會影響到其他內容的布局和排版。