float属性用于元素左右浮动以实现文字环绕或简单布局，取值有left、right、none和inherit；常用于图片环绕、多列排列等场景，但会导致父容器高度塌陷，需通过clear属性或clearfix方法清除浮动；现代布局推荐使用Flexbox或Grid。
在CSS中，float 属性用于让元素向左或向右“浮动”，并允许其他内容（如文本或内联元素）环绕它。虽然现代布局更多使用 Flexbox 或 Grid，但理解 float 仍然对兼容旧代码和简单布局有帮助。
1. 基本语法与取值
float 属性常用取值包括：
- left：元素靠容器左侧浮动
- right：元素靠容器右侧浮动
- none：默认值，不浮动
- inherit：继承父元素的浮动设置
示例：
.float-left {float: left;
}
.float-right {
float: right;
}
2. 浮动的实际应用场景
常见用途包括：
立即学习“前端免费学习笔记（深入）”；
- 实现文字环绕图片效果
- 创建多列横向排列的布局（如图文混排）
- 早期导航栏或侧边栏布局
例如，让图片靠左，文字环绕：
img {
float: left;
margin-right: 10px;
}
3. 清除浮动的影响（清除浮动）
浮动元素会脱离正常文档流，可能导致父容器高度塌陷或后续元素错位。解决方法包括：
- 使用 clear 属性：设置为 left、right 或 both，阻止元素出现在浮动元素旁边
- 添加一个空元素并清除浮动（不推荐）
- 使用伪类 ::after 实现 clearfix
推荐的clearfix写法：
.clearfix::after {content: "";
display: block;
clear: both;
}
然后将该类加在包含浮动元素的父容器上。
4. 注意事项与局限性
使用 float 时需注意：
- 浮动元素必须有明确宽度，否则可能显示异常
- 避免连续多个浮动元素未清除，造成布局混乱
- 现代开发建议优先使用 Flexbox 或 Grid 实现复杂布局
基本上就这些。float 虽然简单，但容易引发布局问题，掌握清除方法很关键。
