clear属性并非清除浮动，而是让当前元素上边界避开前面的浮动元素；它只对普通文档流中的块级元素生效，无法解决父容器高度塌陷，真正修复需触发BFC。
clear 属性根本不是用来“清除浮动”的
它只是让当前元素的**上边界避开前面的浮动元素**，不和它们并排显示。浮动元素本身依然存在、依然脱离文档流，clear 一点也没动它们——所以你给浮动子元素自己加 clear: both 是无效的，它前面又没浮动元素可避。
- 只对参与普通文档流的块级元素生效（
display: block、table等），内联元素或flex/grid子项加了也无效 - 必须出现在浮动元素「之后」：如果 HTML 里浮动盒子写在后面，前面的元素设
clear: left就完全不起作用 -
clear: left和clear: right在绝大多数场景下等价于clear: both，因为同一行通常只有一种方向的浮动；直接用clear: both更稳妥
为什么父容器高度塌陷？clear 解决不了这个问题
父容器塌陷，是因为它「感知不到」浮动子元素的存在——浮动元素已脱离文档流，父容器按普通流计算高度时，就像它们不存在一样。这时候你在父容器上加 clear: both 没用，它前面又没浮动元素；在子元素上加更没用，它自己就是浮动的。
- 真正要解决塌陷，得让父容器形成一个独立的格式化上下文（BFC）
- 常见可靠方案：
display: flow-root（现代推荐）、overflow: hidden（有截断风险）、伪元素::after+clear: both（即 clearfix） -
clear只是 clearfix 技巧中的一环，起作用的是伪元素创建的块级占位 + 触发 BFC 的组合效果，不是clear单独干的
什么时候该用 clear：图文混排、表单布局等位置控制场景
clear 的真实主场，是控制「某一块内容必须换行、不能和前面浮动元素挤在一起」，比如文字绕图后标题强制下沉、多列浮动后插入分隔线等。
.img-thumb { float: left; margin-right: 12px; }
.article-title { clear: both; /* 确保标题一定从新行开始，不和缩略图并排 */ }
.form-row::after { content: ""; display: block; clear: both; }- 不要为了“修复塌陷”而硬塞
clear，先确认是否真需要它——多数现代布局应优先用flex或grid - 若必须兼容老浏览器（如 IE6/7），clearfix 需配合
zoom: 1触发 hasLayout - 用
display: table做伪元素（而非block）能避免某些浏览器的外边距合并问题
现代替代方案：别再为 clear 花太多时间
如果你还在手动写 clearfix 或反复调试 clear，大概率说明布局思路可以升级。浮动本就不是为整体页面结构设计的，而是为文字环绕这类局部效果服务的。
立即学习“前端免费学习笔记（深入）”；
- 主容器布局请直接用
display: flex或display: grid，天然不塌陷、无需清除 - 只需文字环绕图片？用
float+clear依然有效，但仅限这一处，别让它扩散到整个布局体系 -
display: flow-root是最干净的 BFC 触发方式，无副作用，Chrome 58+ / Firefox 57+ / Safari 10.1+ 全支持，2026 年已可放心使用
真正容易被忽略的一点：清除浮动不是目的，而是你意识到「浮动破坏了文档流」之后，被迫补救的中间步骤。越早切换到不依赖文档流脱离的布局模型，越少遇到这类问题。
