CSS浮動提示框是一種常見的網頁設計元素，通常用于在鼠標懸停在某個區域時顯示相關信息。在本文中，我們將學習如何使用CSS實現這種浮動提示框。

.tooltip {
position: relative; /* 相對定位 */
display: inline-block; /* 設置元素為塊級元素，以允許設置寬度 */
border-bottom: 1px dotted black; /* 底部邊框 */
}
/* 定義提示框的外觀 */
.tooltip .tooltiptext {
visibility: hidden; /* 初始不可見 */
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 125%; /* 在元素上方25%的位置 */
left: 50%; /* 居中 */
margin-left: -60px; /* 讓元素在水平方向上居中 */
}
/* 鼠標懸停在元素上時顯示提示框 */
.tooltip:hover .tooltiptext {
visibility: visible;
}

以上代碼可以實現一個基本的浮動提示框。我們首先定義了一個相對定位的父元素（即包含提示框的元素），然后在這個父元素內嵌套一個絕對定位的子元素（即提示框本身）。

提示框的外觀可以根據需要自行調整，例如顏色、圓角大小、字體大小等。通過設置子元素的visibility屬性，在鼠標懸停時將它顯示出來。

總體而言，CSS浮動提示框的實現不算復雜，但可以為網頁設計增添不少亮點。