float使元素脱离文档流并左/右浮动，常用于图文环绕和多列布局；clear用于控制后续元素不被浮动影响，常用both值清除两侧浮动。
在CSS中，float 和 clear 是传统布局方式中的关键属性，常用于实现文字环绕图片、多列布局等效果。但浮动元素会脱离正常文档流，可能影响后续元素的排列，这时就需要使用 clear 来控制布局。
float 的作用与常见用法
float 属性让元素向左或右浮动，其他内容可以围绕它排列。常用值有 left、right 和 none。
例如：让图片靠右，文字环绕在左侧
img { float: right; margin: 0 0 10px 10px; }
这样文本会自动“流动”到图片的左侧和下方。
也可以用 float 实现简单的两栏或三栏布局：
- 左侧菜单栏设置 float: left;
- 右侧内容区也设置 float: left; 并控制宽度
clear 的作用：清除浮动影响
当一个元素不想被前面的浮动元素影响时，就需要使用 clear 属性。它确保该元素显示在浮动元素的下方。
立即学习“前端免费学习笔记（深入）”；
clear 常用值包括：- clear: left — 不允许左边有浮动元素
- clear: right — 不允许右边有浮动元素
- clear: both — 两边都不允许有浮动元素（最常用）
例如：在一段使用了 float 的布局之后，添加一个段落希望从新行开始并独占一行：
这是正文内容...
这个段落不会被上面的浮动影响
浮动带来的问题与解决方案
父容器无法自动撑高是浮动布局的典型问题：如果子元素都设置了 float，父元素可能高度塌陷为0。
解决方法之一：使用 clear 配合额外标签在最后一个浮动子元素后添加一个空元素并清除浮动：
这种方法简单直接，但增加了无意义的DOM结构。
更现代的做法：使用clearfix技巧通过伪元素在父容器上清除浮动，无需额外标签：
.clearfix::after {
content: "";
display: block;
clear: both;
}
然后将该类应用到包含浮动子元素的父容器上即可。
基本上就这些。虽然现在有 Flexbox 和 Grid 等更强大的布局方式，但在维护旧项目或需要兼容老浏览器时，掌握 float 与 clear 的配合仍然很有必要。关键是理解浮动会脱离文档流，而 clear 能有效控制元素的位置关系。不复杂但容易忽略细节。
