css中的float属性用于控制元素在水平方向上的浮动，脱离普通文档流向左或向右移动，直到碰到父元素边缘或者其他浮动元素。它的设计初衷是实现文字环绕图片的效果，后来被开发者延伸用于多栏布局的实现，是早期css布局中非常重要的属性。
float的基本语法和取值
float属性的语法非常简单，基本格式为：
/* 元素选择器 { float: 取值; } */
.box {
float: left;
}
float的常用取值有以下三种：
- left：元素向左浮动
- right：元素向右浮动
- none：默认值，元素不浮动，保持在普通文档流中
除此之外还有inherit取值，表示继承父元素的float值，实际开发中很少使用。
float的常见使用场景
1. 文字环绕图片效果
这是float最初的设计用途，给图片设置浮动后，文字会自动环绕在图片周围，示例代码如下：
<div class="container">
<img src="img/demo.jpg" class="float-img" alt="示例图片">
<p class="text">这是一段测试文字，用于展示文字环绕图片的效果。当图片设置向左浮动后，文字会自动排列在图片的右侧，不会出现在图片的下方，直到文字内容足够多才会换行继续排列。</p>
</div>
.float-img {
float: left;
width: 200px;
height: 150px;
margin-right: 15px; /* 给图片右侧添加间距，让文字和图片有呼吸感 */
}
2. 多栏布局实现
在没有flex和grid布局之前，开发者常用float实现两栏、三栏布局，比如常见的左侧导航栏固定，右侧内容自适应布局：
<div class="layout">
<div class="sidebar">侧边栏内容</div>
<div class="main">主体内容区域</div>
</div>
.layout {
width: 1000px;
margin: 0 auto;
}
.sidebar {
float: left;
width: 200px;
height: 500px;
background-color: #f0f0f0;
}
.main {
margin-left: 210px; /* 留出侧边栏的宽度加间距，避免内容被侧边栏遮挡 */
height: 500px;
background-color: #fafafa;
}
float带来的问题及清除方法
浮动导致的问题
使用float后最常见的问题是父元素高度塌陷，因为浮动元素脱离了普通文档流，父元素无法感知浮动元素的高度，导致父元素高度为0，影响后续布局。比如下面的代码就会出现问题：
<div class="parent">
<div class="child">浮动子元素</div>
</div>
<div class="next">后续元素</div>
.parent {
border: 1px solid #ccc; /* 父元素有边框，但是高度为0的话边框会缩成一条线 */
}
.child {
float: left;
width: 200px;
height: 100px;
background-color: #e8e8e8;
}
.next {
height: 50px;
background-color: #ffe8e8;
}
此时父元素.parent的高度会是0，.next元素会和浮动元素重叠。
清除浮动的方法
清除浮动的核心是让父元素能感知到浮动元素的高度，常用方法有以下几种：
1. 使用clear属性
clear属性用于指定元素的哪一侧不允许有其他浮动元素，取值有left、right、both、none、inherit，最常用的是both。可以在父元素内部最后添加一个空的块级元素，设置clear:both：
.clear-fix {
clear: both;
}
<div class="parent">
<div class="child">浮动子元素</div>
<div class="clear-fix"></div>
</div>
2. 父元素触发BFC
给父元素设置以下属性之一，触发BFC（块级格式化上下文），父元素就会包含浮动元素：
- overflow: hidden / auto / scroll（非visible即可）
- display: flow-root（最推荐，无副作用）
- float: left / right（不推荐，父元素本身也会浮动）
示例代码如下：
.parent {
border: 1px solid #ccc;
display: flow-root; /* 触发BFC，包含浮动子元素 */
}
3. 伪元素清除法
这是实际开发中最常用的清除浮动方式，不需要添加额外的html元素，通过父元素的伪元素实现：
/* 通用清除浮动类 */
.clearfix::after {
content: "";
display: block;
clear: both;
}
<div class="parent clearfix">
<div class="child">浮动子元素</div>
</div>
使用float的注意事项
- 浮动元素会脱离普通文档流，不会影响前面的元素，但会影响后面的元素排列
- 浮动元素的宽度如果没有显式设置，会收缩为内容的宽度，和行内块元素特性类似
- 如果多个浮动元素宽度之和超过父元素宽度，后面的浮动元素会自动换行
- 现代布局中优先使用flex或grid布局，float更适合实现文字环绕等特定场景，避免过度使用float实现复杂布局