CSS中的float属性被称为浮动布局，它可以让元素沿左侧或右侧浮动，从而实现了多列布局、图片环绕文字等效果。float属性具有以下几个作用：

.float-left {float: left;}

1. 多列布局

通过使用float属性，可以实现多列布局。比如我们可以将3个块级元素分别浮动到左侧，实现左浮动三列布局：

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

2. 图片环绕文字

通过将图片浮动到左侧或右侧，可以实现文字环绕图片的效果，让页面看起来更加精美。比如我们可以将一个图片浮动到左侧，并设置一定的外边距和内边距，让文字环绕在图片周围：

<div ><img src="/post/example.jpg"   /><p>这里是一些文字，可以环绕在图片周围。</p></div>.wrap {width: 300px;overflow: hidden;}.image {width: 100px;height: 100px;float: left;margin: 10px;padding: 5px;}

3. 块级元素高度自适应

如果一个块级元素内部包含了浮动元素，那么它的高度将不再受到浮动元素的影响，就会出现高度塌陷的问题。为了解决这个问题，我们可以在浮动元素的外层容器上设置overflow:hidden或者使用clearfix清除浮动。

<div ><div ></div><div ></div><div ></div></div>.clearfix:after {content: "";display: table;clear: both;}

总之，float属性可以让我们轻松实现多种布局效果，但同时也会带来一些问题，需要我们在使用的时候注意。另外，我们还需记住在父级元素上清除浮动，防止出现高度塌陷的问题。