CSS中的浮動是一個常用的布局技巧，通過將元素浮動到頁面的左側或右側，可以實現多欄布局、圖文混排等效果。下面我們來了解一下CSS中浮動的基本原理。

/* 將目標元素向左浮動 */
.box {
float: left;
width: 100px;
height: 100px;
}

以上代碼中，我們給一個名為.box的元素設置了浮動屬性，并指定其寬度和高度。這樣，該元素就會“脫離文檔流”，并向左側浮動，直到遇到父元素或其他浮動元素為止。

/* 給父元素設置包裹屬性，讓其盡量縮小 */
.container {
width: 500px;
overflow: hidden;
}

在以上代碼中，我們給浮動元素的父元素設置了寬度，并將其overflow屬性設置為hidden。這樣，父元素就會“包裹”住子元素，盡量縮小自身的寬度。如果不設置包裹屬性，父元素的寬度將會自適應其子元素的寬度，導致浮動效果出現問題。

/* 清除浮動，防止影響頁面布局 */
.clearfix:after {
content: "";
display: block;
clear: both;
}

最后，我們需要給浮動元素的父元素添加一個清除浮動的樣式，以免對后續元素的布局產生影響。在這里我們使用了clearfix類來清除浮動，其原理是使用一個空的塊級元素來清除浮動后所留下的空隙。

總之，CSS中浮動是一個十分實用的布局技巧，熟練掌握其原理和使用技巧，對于網頁設計和開發都是非常有幫助的。