clear属性必须加在要下移的非浮动块级兄弟元素上，而非浮动元素自身；其作用是强制该元素避开左侧、右侧或两侧浮动区域，从浮动块下方重新起行。
clear属性为什么必须加在“要下移”的元素上
浮动元素会脱离文档流，但后续标准流元素仍按原位置渲染，只是视觉上被浮动块遮挡或挤开——clear不是移动浮动元素，而是强制当前元素“避开已浮动区域”，从而从浮动块下方重新起行。
常见错误是给浮动元素自己加 clear，这毫无作用；真正要加的位置，是紧挨在浮动块之后、你想让它换行显示的那个元素。
-
clear: left：只避开左侧浮动块，右侧仍可能被右浮元素顶上来 -
clear: right：同理，只防右浮 -
clear: both：最常用，确保避开所有方向的浮动，安全落地
浮动后文字被遮盖？先检查是否漏了clear
典型现象：<div style="float: left">菜单</div> 后跟一个 <p>正文内容</p>，结果文字从菜单右侧开始显示，甚至被截断——这不是文字错位，是 p 仍在原高度渲染，只是被左浮动菜单“盖住”了上半部分。
修复方式很简单：直接在 p 上加 clear: both：
立即学习“前端免费学习笔记（深入）”；
<p style="clear: both">正文内容</p>
如果不想污染内联样式，更推荐统一用类名控制，比如 .break-after-float。
父容器高度塌陷时，clear也救不了子元素布局
当浮动子元素导致父容器高度变成 0，后续兄弟元素会直接贴着父容器上边沿排布，此时单靠给兄弟元素加 clear 无法让它“从父容器下方开始”，因为父容器本身已经没高度了。
必须先解决父容器包裹问题，再处理兄弟元素位置：
- 给父容器加
overflow: hidden（简单但有剪裁风险） - 用伪元素清除：
.clearfix::after { content:""; display: block; clear: both; }，然后给父容器加上class="clearfix" - 避免用
height硬撑，那会让响应式失效
现代布局中，clear基本可以少用了
如果你正用 float 做多列布局，却频繁纠结 clear 的位置和效果，说明已经踩进过时模式。Flex 和 Grid 天然支持顺序控制：order 属性能重排视觉顺序，grid-column 可指定格子位置，且不破坏文档流。
只有维护老项目或兼容 IE8 时才真需要深究 clear——而这类场景里，最容易被忽略的不是语法，是 DOM 结构本身：浮动顺序严重依赖 HTML 书写顺序，改样式前先确认结构没写反。
