clear属性能阻止浮动覆盖文本，是因为它强制后续块级元素避开指定方向的浮动，直到找到未被占据的水平位置；它只对文档流中前面的兄弟浮动元素生效，且仅作用于块级盒模型。
clear属性为什么能阻止浮动覆盖文本
浮动元素脱离文档流后，后续块级元素会“看不见”它，但行内内容（比如段落文字）会绕着它走——这正是覆盖感的来源。clear不是给浮动元素加边距，而是告诉当前元素：“你得躲开所有指定方向的浮动，直到找到一个没被浮动占据的水平位置”。
常见错误现象：clear: left写在浮动元素自己身上无效；clear: both加在空
里却忘了设
height或overflow，导致父容器塌陷，看似清了实则没起作用。
-
clear必须作用于**后续兄弟元素**，不能加在浮动元素自身上 - 如果后续是
<p></p>这类默认块级元素，直接加clear: both最稳妥 - 若后续元素是
display: inline或inline-block，clear无效——它只对块级盒模型生效
不用clear也能安全隔开浮动的现代写法
CSS Grid 和 Flexbox 天然规避浮动流问题，但老项目或需兼容 IE8–9 时，clear仍是刚需。不过现在更推荐用overflow: hidden或display: flow-root触发BFC来包裹浮动父容器，一劳永逸。
使用场景：你有一组float: left的卡片，下面紧跟一段说明文字，希望文字从卡片下方完整开始，而不是被挤到右侧空白处。
立即学习“前端免费学习笔记（深入）”；
-
display: flow-root是最干净的方案，兼容性到 Chrome 64+/Firefox 59+，IE 不支持 -
overflow: hidden兼容性好，但可能意外裁剪子元素的position: absolute溢出内容 - 避免用
overflow: auto，滚动条可能凭空出现，尤其在 Safari 中
clear和float配合时的典型错误配置
很多人以为clear: right就能让元素避开右边浮动，结果发现完全没反应——这是因为clear只检查**前面的兄弟浮动元素**，不看后面、也不看父级或同级非相邻元素。
错误现象：clear: both加在一个<div>上，但它前面没有浮动兄弟，或者浮动兄弟被<code>position: absolute移出了正常流，clear就形同虚设。
- 浮动必须是文档流中的兄弟节点，
position: absolute或fixed的元素不会触发clear -
clear值只接受left、right、both、none，clear: all是无效写法 - Flex 容器里的子项即使设了
float，clear也无效——Flex 布局下float和clear被忽略
移动端适配中clear容易被忽略的细节
在响应式布局里，同一组元素在桌面端浮动排列，到移动端变成垂直堆叠，此时clear若没随断点重置，可能造成意外留白或错位。
性能影响：单个clear几乎无开销，但大量使用且配合复杂浮动嵌套时，浏览器需要反复重排（reflow），尤其在 iOS Safari 中表现明显。
- 媒体查询中记得重置：
@media (max-width: 768px) { .card { float: none; clear: none; } } - 不要依赖
clear做垂直间距——用margin-top或gap更可控 - 当父容器用
display: grid后，子元素的float和clear自动失效，这点常被调试时忽略
