clear属性不能清除浮动本身，而是强制元素上边界避开前序浮动元素的干扰区域；它仅对自身生效，无法解决父容器高度塌陷，真正解法是触发BFC、伪元素清除或改用Flex/Grid布局。
clear属性为什么能清除浮动影响
浮动元素会脱离文档流，导致父容器高度塌陷、后续元素位置错乱。而 clear 的作用不是“清除浮动本身”，而是强制元素避开前面浮动元素的干扰区域——它让当前元素的上边界不与左侧/右侧/两侧的浮动元素重叠。
常见错误是以为加了 clear: both 就能修复父容器高度塌陷，其实它只对自身生效，无法撑开父级。真正解决塌陷得靠其他方法（见下一条）。
什么时候该用clear，什么时候不该用
clear 适合用于「紧接在浮动元素之后」的兄弟元素，比如导航栏浮动后，下面的内容区块需要下移避开：
- ✅ 正确场景：浮动菜单后紧跟
<div class="content">，给 content 加 <code>clear: both - ❌ 错误场景：只给浮动元素自己加
clear（无效，浮动元素不响应 clear） - ❌ 错误场景：给父容器加
clear（父容器没浮动，clear 不起作用）
典型写法：
.nav { float: left; }
.content { clear: both; }
clear的取值和实际效果差异
clear 只接受四个值，但行为容易混淆：
立即学习“前端免费学习笔记（深入）”；
-
clear: left→ 当前元素上边不能和前面任何float: left元素在同一水平线 -
clear: right→ 同理，避开右侧浮动 -
clear: both→ 同时避开左右浮动（最常用） -
clear: none→ 默认值，不避开任何浮动
注意：clear 不会改变浮动元素的位置，也不会影响非相邻元素；它只作用于当前元素的“顶部外边距”计算逻辑。
父容器高度塌陷的真正解法不是clear
如果目标是让父容器包裹住内部浮动子项（比如 ul 里一堆 float: left 的 li），clear 本身做不到。必须配合其他手段：
- 给父容器触发 BFC：如
overflow: hidden、display: flow-root（推荐） - 伪元素清除法：
::after { content: ""; display: table; clear: both; } - 使用 Flex 或 Grid 布局替代浮动（现代项目首选）
强行在父容器里塞一个 clear: both 的空 div 是过时做法，语义差且增加无用 DOM。
