float属性使元素脱离文档流并左/右浮动，允许内容环绕，常用于图文布局或多列排列；clear属性则用于清除浮动影响，通过设置left、right或both来防止元素与浮动元素相邻，确保布局顺序，二者常配合使用以解决高度坍塌和元素错位问题。
在网页布局中，float 和 clear 是两个经典的CSS属性，主要用于控制元素的浮动与清除浮动影响。虽然现代布局更多使用Flexbox或Grid，但在一些特定场景下，这两个属性依然有其实用价值。
float 的使用场景
float 属性用于让元素向左或右浮动，其他内容会围绕它排列。常见用途包括：
- 文字环绕图片：新闻或博客文章中，图片靠左或靠右，文字自然环绕其周围。
- 创建多列布局：通过给多个块级元素设置 float:left，实现简单的横向排列（如两栏或三栏布局）。
- 按钮或组件的对齐：在旧式导航条中，常使用 float:right 将菜单项推到容器右侧。
clear 的使用场景
clear 属性用于控制元素是否允许出现在浮动元素的旁边。它通常用于“清除浮动”，确保后续元素不被浮动影响。
- 结束浮动影响：当一组浮动元素完成后，下一个块级元素可能会上移并占据空白区域，使用 clear:both 可强制该元素从下一行开始。
- 闭合包含浮动的父容器：父元素若只包含浮动子元素，通常高度为0。通过在最后一个子元素后添加一个 clear:both 的空元素，或使用伪元素，可撑起父容器高度。
- 分隔内容区块：在文章段落或模块之间插入 clear，避免前一区块的浮动干扰下一区块布局。
常见组合用法
实际开发中，float 与 clear 常配合使用来修复布局问题：
立即学习“前端免费学习笔记（深入）”；
- 使用
::after伪元素清除浮动（推荐方式）：
.container::after {
content: "";
display: block;
clear: both;
}
这种方式无需额外HTML标签，是闭合浮动的经典写法。
基本上就这些。虽然 float 和 clear 已逐渐被现代布局取代，理解它们仍有助于维护老项目或应对简单排版需求。关键是清楚浮动带来的影响，并及时清除。不复杂但容易忽略。
