CSS浮動是一種布局方式，可以將元素從正常文檔流中脫離出來并放置在其父元素內的左側或右側，同時其他內容也會被環繞。通過設置float屬性，可以讓元素浮動到指定的位置。

.float-box {
float: left;
width: 200px;
height: 200px;
margin-right: 20px;
}

浮動的作用主要有以下幾點：

1.實現圖文混排效果

浮動元素可以實現頁面中圖片和文字的組合效果，將圖片浮動到文本的一側，使文本環繞其周圍。在新聞、博客等網站中，經常使用這種方式配圖。通過設置float屬性，可以讓圖片與文字更加緊湊，讓網頁內容更加美觀。

2.多列布局

浮動元素還可以實現多欄布局，通過將多個盒子浮動到父容器的左側或右側，可以實現多列等寬布局。

.sidebar {
float: left;
width: 300px;
}
.content {
float: right;
width: 600px;
}

3.響應式布局

在移動端設備上瀏覽網頁時，常常需要使用響應式布局來適配不同的屏幕尺寸。通過設置float屬性，可以使頁面元素在不同的屏幕尺寸下自適應排列，提升用戶體驗。

總的來說，CSS浮動是一種非常實用的布局方式，可以讓網頁開發者更靈活地控制頁面元素的位置和布局，實現更加豐富多樣的頁面效果。