float和clear通过使元素脱离文档流并控制浮动影响，实现文字环绕、多栏布局及内容分隔，常用于传统网页布局。
在网页布局中，float 和 clear 是两个经典且实用的CSS属性，常用于实现文字环绕图片、多栏布局等效果。虽然现代布局更多使用Flexbox或Grid，但理解 float 与 clear 的结合应用仍对维护旧项目和掌握CSS布局演变很有帮助。
float 的基本用法
float 属性让元素脱离正常文档流，并向左或右移动，直到其边缘紧贴父容器或另一个浮动元素的边缘。
常用值：- float: left; — 元素向左浮动
- float: right; — 元素向右浮动
- float: none; — 默认值，不浮动
例如，让图片靠右，文字环绕显示：
img {
float: right;
margin: 0 0 10px 10px;
}
clear 防止元素被浮动影响
当元素前面有浮动元素时，它可能会“上浮”到空白区域，造成布局错乱。使用 clear 可以控制元素是否允许出现在浮动元素的旁边。
立即学习“前端免费学习笔记（深入）”；
常用值：- clear: left; — 元素左侧不允许有浮动元素
- clear: right; — 元素右侧不允许有浮动元素
- clear: both; — 左右两侧都不允许有浮动元素
- clear: none; — 默认值，不做清除
常见场景：在一段浮动布局后插入一个标题，避免标题被“吸上去”：
h2 {
clear: both;
}
float 与 clear 的典型结合应用
通过 float 实现多栏布局，再用 clear 控制内容分隔，是传统布局的经典做法。
示例：两栏布局（左侧内容，右侧侧边栏）
.main-content {
float: left;
width: 70%;
}
.sidebar {
float: right;
width: 30%;
}
.footer {
clear: both;
}
这里 .footer 使用 clear: both; 确保它不会挤到两栏中间，而是显示在它们下方。
注意事项与常见问题
浮动元素会脱离文档流，可能导致父容器高度塌陷（父容器无法自动包裹浮动子元素）。
解决方法之一：使用清除浮动的“clearfix”技巧
.clearfix::after {
content: "";
display: table;
clear: both;
}
将这个类加在包含浮动元素的父容器上，可有效闭合浮动，恢复正常的高度计算。
基本上就这些。float 和 clear 虽然老旧，但在特定场景下依然实用，关键是理解它们如何影响文档流以及如何用 clear 来控制布局顺序。
