CSS中的浮動模塊經常被使用在網頁布局中，它可以使得各個元素之間不會重疊在一起，從而美化用戶界面。但是在某些情境下，我們需要將浮動模塊縮小為一個小窗口。下面我們就來看看如何通過CSS實現這個功能。 首先，我們需要創建一個視覺元素。這個元素可以是一個按鈕或者是一個鏈接，用來觸發浮動模塊縮小的動作。例如：

點擊這里可以縮小窗口

接著，我們需要定義一個用于縮小的CSS類。該類將應用于浮動模塊上，這樣就可以將其轉化為一個小窗口。例如：

.shrink {
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 100px;
}

以上代碼說明了以下幾個屬性： - position: absolute 使浮動模塊脫離文檔流并且絕對定位。 - top: 0 和 right: 0 使模塊在頁面的右上角。 - width 和 height 將窗口的大小設置為 200 像素寬、100 像素高。 在點擊按鈕后，我們需要用JavaScript將浮動模塊的類修改為 .shrink，從而實現縮小效果。例如：

document.querySelector('.shrink-btn')
.addEventListener('click', function () {
document.querySelector('.floating-module')
.classList.add('shrink');
});

最后，我們還需要添加一個“還原”按鈕，當用戶單擊此按鈕時，浮動模塊將還原成原始大小。實現代碼如下：

點擊這里可以縮小窗口， 點擊這里可以還原窗口

.restore-btn {
display: none;
}
.restore-btn.shown {
display: block;
}

以上代碼中，我們使用了 CSS 中的 display 屬性來切換 “還原” 按鈕的可見性。當浮動模塊被縮小后，我們可以將 restore-btn 類添加到 HTML 元素中，從而顯示此按鈕，代碼如下：

document.querySelector('.restore-btn')
.classList.add('shown');

當用戶單擊“還原”按鈕后，我們可以使用以下代碼將 restore-btn 類從 HTML 元素中刪除，從而隱藏此按鈕：

document.querySelector('.restore-btn')
.classList.remove('shown');

以上就是如何通過CSS實現浮動模塊縮小為小窗口的全部內容了。我們可以通過這種技術來實現各種互動的用戶界面，從而提升網站的用戶體驗。