CSS的float属性是前端布局中常用的属性之一，主要作用是让元素脱离正常的文档流，向左或者向右移动，直到碰到父元素的边缘或者其他浮动元素为止，常用于实现文字环绕图片、多列横向排列等布局效果。
float属性的可选取值
float属性一共有四个可选值，其中最常用的是left和right，具体说明如下：
- none：默认值，元素不浮动，按照正常文档流排列。
- left：元素向左浮动，后续非浮动元素会环绕在它的右侧。
- right：元素向右浮动，后续非浮动元素会环绕在它的左侧。
- inherit：继承父元素的float属性值，实际开发中很少使用。
float属性的基础使用示例
文字环绕图片效果
这是float最经典的使用场景，让图片浮动之后，文字会自动环绕在图片周围，不需要额外做复杂的定位处理。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文字环绕示例</title>
<style>
.img-box {
float: left; /* 图片向左浮动 */
width: 200px;
height: 150px;
margin-right: 15px; /* 给图片右侧留间距，避免文字贴太近 */
background-color: #f0f0f0;
}
.text {
font-size: 14px;
line-height: 1.6;
}
</style>
</head>
<body>
<div class="img-box">浮动图片</div>
<p class="text">
这是一段测试文字，当图片设置了向左浮动之后，这段文字会自动环绕在图片的右侧。
如果文字内容足够多，还会在图片下方继续正常排列，这就是float属性实现文字环绕效果的基本原理。
实际开发中可以根据需要调整图片的浮动方向和间距，让布局更符合设计需求。
</p>
</body>
</html>
多列横向排列布局
多个块级元素设置同方向的浮动，就可以实现横向排列的效果，替代部分flex布局的使用场景。
/* 三个列都向左浮动，实现横向排列 */
.col {
float: left;
width: 30%;
height: 200px;
margin-right: 5%;
background-color: #e8f4ff;
}
/* 最后一个列去掉右侧间距 */
.col:last-child {
margin-right: 0;
}
float属性带来的常见问题
父元素高度塌陷
当父元素内部的所有子元素都设置了浮动，这些子元素会脱离文档流，父元素无法感知到子元素的高度，就会出现高度变为0的塌陷问题，导致后续布局错乱。
后续元素排列异常
浮动元素脱离文档流后，后续的非浮动元素会忽略浮动元素的存在，直接排到浮动元素原来的位置，导致内容被浮动元素遮挡。
清除浮动的方法
解决浮动带来的问题，最核心的是清除浮动的影响，常用的方法有以下几种：
使用clear属性
clear属性用于指定元素的哪一侧不允许有浮动元素，可选值有left、right、both、none，最常用的是both，表示两侧都不允许有浮动元素。
可以在父元素的末尾添加一个空的块级元素，设置clear: both来清除浮动：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>清除浮动示例</title>
<style>
.parent {
border: 1px solid #ccc;
padding: 10px;
}
.child {
float: left;
width: 100px;
height: 100px;
background-color: #ffd700;
margin-right: 10px;
}
.clear-fix {
clear: both; /* 清除两侧浮动 */
}
</style>
</head>
<body>
<div class="parent">
<div class="child">子元素1</div>
<div class="child">子元素2</div>
<div class="clear-fix"></div>
</div>
</body>
</html>
使用伪元素清除浮动
上面的方法需要额外添加空标签，不够优雅，实际开发更推荐用伪元素::after来清除浮动，不需要修改HTML结构：
/* 通用清除浮动类 */
.clearfix::after {
content: "";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
/* 兼容IE低版本 */
.clearfix {
zoom: 1;
}
只需要在父元素上添加clearfix类，就可以解决父元素高度塌陷的问题，这是目前最常用的清除浮动方案。
float属性的使用注意事项
- 浮动元素会生成块级框，不管它本身是什么元素，设置浮动后都会变成块级元素，可以设置宽高。
- 如果浮动元素的高度不同，后续浮动元素可能会卡在高度较低的元素旁边，需要合理设置元素高度或者间距。
- 现在flex布局已经可以替代大部分float的布局场景，新项目如果不是需要兼容旧浏览器，更推荐使用flex布局，代码更简洁，维护更方便。