CSS中的float屬性被稱為浮動布局，它可以讓元素沿左側或右側浮動，從而實現了多列布局、圖片環繞文字等效果。float屬性具有以下幾個作用：

.float-left {
float: left;
}

1. 多列布局

通過使用float屬性，可以實現多列布局。比如我們可以將3個塊級元素分別浮動到左側，實現左浮動三列布局：

<div class="column">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
.column {
overflow: hidden;
}
.item {
width: 30%;
float: left;
margin-right: 3%;
}

2. 圖片環繞文字

通過將圖片浮動到左側或右側，可以實現文字環繞圖片的效果，讓頁面看起來更加精美。比如我們可以將一個圖片浮動到左側，并設置一定的外邊距和內邊距，讓文字環繞在圖片周圍：

<div class="wrap">
<img src="example.jpg" class="image" alt="Example" />
<p>這里是一些文字，可以環繞在圖片周圍。</p>
</div>
.wrap {
width: 300px;
overflow: hidden;
}
.image {
width: 100px;
height: 100px;
float: left;
margin: 10px;
padding: 5px;
}

3. 塊級元素高度自適應

如果一個塊級元素內部包含了浮動元素，那么它的高度將不再受到浮動元素的影響，就會出現高度塌陷的問題。為了解決這個問題，我們可以在浮動元素的外層容器上設置overflow:hidden或者使用clearfix清除浮動。

<div class="clearfix">
<div class="float-left"></div>
<div class="float-left"></div>
<div class="float-left"></div>
</div>
.clearfix:after {
content: "";
display: table;
clear: both;
}

總之，float屬性可以讓我們輕松實現多種布局效果，但同時也會帶來一些問題，需要我們在使用的時候注意。另外，我們還需記住在父級元素上清除浮動，防止出現高度塌陷的問題。