在網頁設計中，圖片是極為重要的一環。可以通過CSS樣式實現圖片漂浮上升的效果，使圖片在網頁中更為醒目。這種效果引人注目，可以在展示商品或者人物時提升整體形象。

img {
position: relative;
left: 0;
top: 0;
-webkit-transition: top .2s ease-out, box-shadow .2s ease-out;
-moz-transition: top .2s ease-out, box-shadow .2s ease-out;
-ms-transition: top .2s ease-out, box-shadow .2s ease-out;
-o-transition: top .2s ease-out, box-shadow .2s ease-out;
transition: top .2s ease-out, box-shadow .2s ease-out;
}
img:hover {
top: -5px;
box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
}

首先需要使用CSS樣式，為圖片設置相對定位，然后將浮動效果實現。上述代碼中，我們使用了hover懸停狀態、相對定位和box-shadow陰影效果。hover的效果可以在浮動時實現，還可以加入一些其它的效果來更好的呈現。例如淡入淡出效果、圖片旋轉效果等等。

需要注意的是：這種效果在移動端或者低版本IE瀏覽器上不一定兼容。我們可以添加一些媒體查詢來適配屏幕尺寸不同的設備：

@media screen and (max-width: 768px) {
img:hover {
top: 0;
box-shadow: none;
}
}

在小屏幕設備中，我們將極短的時間內取消浮動狀態，以保證效果的順暢性。

總體來說，使用CSS樣式實現圖片漂浮上升的效果是一件很有趣的事情。通過添加一些效果來豐富頁面，可以使我們的網頁更加醒目、有趣。