浮动属性通过float:left或right使元素脱离文档流并左右排列，实现图文环绕或多列布局，需注意清除浮动以避免父容器塌陷，常用方法包括clear:both、overflow:hidden或伪类clearfix，尽管现代布局多用Flexbox和Grid，但理解float对维护旧项目和特定效果仍有价值。
浮动（float）属性是CSS中用于控制元素在父容器内左右排列的一种传统布局方式。通过设置 float: left 或 float: right，可以让块级元素脱离正常文档流，并向指定方向靠拢，实现文本环绕图片或多个盒子并排显示的效果。
float的基本取值与作用
float 属性主要有四个可选值：- left：元素向左浮动，其他内容围绕其右侧和下方排列
- right：元素向右浮动，其他内容围绕其左侧和下方排列
- none：默认值，不浮动
- inherit：继承父元素的浮动设置
使用float实现左右排列
假设要将两个盒子并排放置，一个在左，一个在右：<div class="box-left">左边内容</div> <div class="box-right">右边内容</div>对应CSS：
.box-left {
float: left;
width: 50%;
}
.box-right {
float: right;
width: 50%;
}
此时两个盒子会分别贴着容器的左右边缘排列，形成一左一右的布局。
清除浮动的影响
浮动元素会脱离标准流，可能导致父容器高度塌陷或后续元素错位。为避免问题，需要清除浮动：- 使用 clear: both 在浮动元素后添加清除元素
- 给父容器添加 overflow: hidden 触发BFC（块格式化上下文）
- 使用伪类清除：
.clearfix::after { content: ""; display: block; clear: both; }并将该类应用到父容器
实际应用场景与注意事项
虽然现代布局更多使用 Flexbox 或 Grid，但理解 float 仍有助于维护旧项目或实现特定效果：- 图文混排时让图片浮动，文字自动环绕
- 创建简单的两栏或三栏网页布局
- 注意设置宽度，防止浮动元素换行
- 始终考虑清除浮动，避免布局混乱
基本上就这些。float 虽然不是当前推荐的主要布局手段，但在特定场景下依然实用，掌握其原理对理解CSS布局演变很有帮助。不复杂但容易忽略细节。
