float用于元素脱离文档流并左/右移动，常用于图文混排；clear防止元素被浮动元素挤占位置，通过clear:both等值确保元素下移；两者配合可实现传统多列布局，并解决父容器高度塌陷问题。
在CSS中，float 和 clear 常用于控制元素的浮动与清除浮动，是传统网页布局的重要手段。虽然现代布局更多使用 Flexbox 或 Grid，但在维护旧项目或需要兼容性时，掌握 float 与 clear 的配合仍十分必要。
float 的作用
float 属性让元素脱离正常文档流，并向左或右移动，直到其边缘紧贴父容器或另一个浮动元素。
常见取值：- float: left; — 元素向左浮动
- float: right; — 元素向右浮动
- float: none; — 默认值，不浮动
文本和其他内联内容会围绕浮动元素显示，这常用于图文混排或多列布局。
clear 的作用
当元素前面有浮动元素时，它可能会被“挤上去”进入浮动元素旁边的空白区域。使用 clear 可以避免这种情况，强制元素出现在浮动元素的下方。
立即学习“前端免费学习笔记（深入）”；
常用取值：- clear: left; — 不允许左边有浮动元素
- clear: right; — 不允许右边有浮动元素
- clear: both; — 两边都不允许有浮动元素
- clear: none; — 默认值，不做清除
float 与 clear 的典型用法
假设要创建两栏布局：左侧为导航，右侧为主内容。
<div class="sidebar">左侧菜单</div> <div class="main-content">主内容</div>
CSS 设置如下：
.sidebar {
float: left;
width: 200px;
background: #ddd;
}
.main-content {
margin-left: 200px; /* 避开左侧浮动栏 */
}
如果后续有一个新元素（如页脚）不想被这两个浮动元素影响，可以这样清除浮动：
.footer {
clear: both;
}
这样页脚就会完整地显示在所有浮动元素的下方。
注意浮动带来的问题
父容器若只包含浮动子元素，会发生高度塌陷——父元素无法包裹子元素。解决方法之一就是结合 clear 使用“清除块”：
.clearfix {
clear: both;
}
在父容器末尾添加一个空元素并应用该类，或使用伪元素更优雅地处理。
基本上就这些。float 与 clear 虽然老旧，但在理解 CSS 布局演变过程中很关键，也能应对一些简单场景的需求。
