浮动（Float）用于元素横向排列，通过float:left或float:right使元素脱离文档流并左/右对齐，常用于多列布局；多个浮动元素在容器宽度足够时会并排显示，如.left-box设width:60%、float:left，.right-box设width:40%、float:right可实现两栏布局；但浮动会导致父容器高度塌陷，需通过clear:both、overflow:hidden或伪元素::after{content:"";display:table;clear:both}清除浮动；使用时应注意总宽度不超父容器、避免混用浮动与非浮动块元素，并在响应式设计中结合媒体查询调整；尽管现代布局多用Flexbox或Grid，掌握Float仍对维护旧项目和理解CSS布局演变具有重要意义。
浮动（Float）是CSS中实现元素横向排列的一种传统方式，虽然现代布局更多使用Flexbox或Grid，但在维护旧项目或理解CSS布局演变时，掌握Float依然重要。通过设置float属性，可以让元素脱离正常文档流并向左或向右“漂浮”，其他内容则围绕其排列。
Float基本语法与作用
float属性主要有四个值：left、right、none（默认）、inherit。常用的是left和right。
- float: left —— 元素靠容器左侧排列
- float: right —— 元素靠容器右侧排列
- float: none —— 不浮动，元素在正常流中显示
当多个元素都设置为float: left时，它们会从左到右依次排列在同一行（只要容器宽度允许）。
实现左右排列的常见方法
假设我们要让两个div并排显示，一个在左，一个在右：
立即学习“前端免费学习笔记（深入）”；
<div class="container"> <div class="left-box">左侧内容</div> <div class="right-box">右侧内容</div> </div>
CSS样式如下：
.left-box {
float: left;
width: 60%;
background-color: #eee;
}
.right-box {
float: right;
width: 40%;
background-color: #ccc;
}
这样，左侧占60%宽度，右侧占40%，两者并排显示。若只对其中一个元素使用float，另一个未设宽度或浮动，可能无法达到预期效果。
清除浮动与布局问题处理
浮动会导致父容器“塌陷”——即父元素高度无法自动包含浮动子元素。解决方法包括：
- 使用clear属性：
<div style="clear:both;"></div>放在浮动元素后 - 给父容器添加overflow: hidden 或 overflow: auto
- 使用伪元素清除浮动（推荐）：
.container::after {
content: "";
display: table;
clear: both;
}
这种方法既不影响结构，又能有效闭合浮动，是较为优雅的解决方案。
实际应用中的注意事项
使用float进行布局时需注意以下几点：
- 确保所有浮动元素总宽度不超过父容器，否则会换行
- 避免混合使用浮动与非浮动块级元素，容易造成错位
- 记得清除浮动，防止影响后续元素布局
- 移动端适配时，浮动可能在小屏幕上表现不佳，建议结合媒体查询调整
基本上就这些。Float虽老，但理解它有助于更好掌握CSS布局原理。现在大多数新项目推荐使用Flexbox，但在某些场景下，float仍是一种简单有效的选择。
