CSS布局中的基石之一便是浮動。浮動可以讓元素脫離文檔流，從而使得其他內容可以環繞在其周圍。它可以用來實現很多布局效果，如多欄布局、圖文混排等。

.float-left {
float: left;
}
.float-right {
float: right;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}

上面是一段簡單的浮動樣式代碼。其中，我們定義了左浮動和右浮動的class，以及清除浮動的class。清除浮動通常采用after偽元素和清除浮動屬性來實現。

浮動元素會脫離文檔流，因此要注意它對周圍元素的影響。通常情況下，需要在浮動元素的父元素上加上一個清除浮動的類。

.parent {
overflow: hidden;
/* 手動觸發BFC，清除浮動 */
}
.parent::after {
content: "";
display: table;
clear: both;
}

我們還可以利用浮動元素的特性實現多欄布局。下面是一個簡單的例子：

.col {
width: 30%;
margin-right: 5%;
float: left;
}
.col:last-child {
margin-right: 0;
}

在上面的代碼中，我們定義了三個相鄰的等寬列，并對中間的列加上了一個右邊距。使用了float屬性后，這三列就能夠進行左浮動，并自動適應父元素的寬度。

浮動元素還可以實現圖文混排的效果。下面是一個簡單的例子：

.text {
float: left;
width: 70%;
}
.img {
float: right;
width: 30%;
}

在上面的代碼中，我們定義了一個文本區域和一個圖片區域，并利用float屬性實現了左浮動和右浮動。這樣就可以將文本和圖片進行排列，并形成圖文混排的效果。

總之，浮動是CSS布局中非常重要的一個特性，可以用來實現很多常見的布局效果。我們需要掌握它的使用方法，同時注意避免它帶來的副作用。