懸浮框是網頁設計中一個很常見的效果，它可以讓用戶直接在頁面上獲取更多的信息或者提示。在CSS中實現懸浮框的效果也很簡單，我們可以使用一些CSS屬性和偽元素來實現。

/* CSS樣式 */
.floating-box {
position: relative;
}
.floating-box:hover::before {
content: "";
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
width: 150px;
height: 30px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 30px;
}
/* HTML結構 */
這里是懸浮框文字內容

以上代碼中，我們使用了一個偽元素::before作為懸浮框，定義了它的樣式和位置，并給它設定了文本內容。當鼠標懸浮在.floating-box元素上時，就會觸發::before偽元素的顯示效果，從而實現了懸浮框的效果。

需要特別注意.floating-box元素的定位方式必須為relative，而懸浮框的偽元素定位方式必須為absolute。