用 clear 修正浮动错位：在需换行的块级兄弟元素上设 clear: both；错误做法是给浮动元素自身加 clear；推荐用 .clearfix 伪元素自动清理，或优先采用 Flex/Grid 布局。
浮动元素导致后续模块错位，怎么用 clear 修正？
浮动会让元素脱离文档流，后面的内容会“无视”它向上挤，造成视觉顺序和 HTML 结构不一致。最直接的修复方式就是用 clear 告诉某个元素：“你前面不能有浮动元素”。
-
clear: left表示该元素左边不能有浮动元素（常用于左浮动后的清理） -
clear: right对应右浮动 -
clear: both最常用——左右都不能有浮动，确保元素从新行开始，不受上下浮动影响 - 注意：
clear只对**块级元素**生效；行内元素设了也没用
clear: both 放在哪？别加在浮动元素自己身上
很多人误以为给浮动的 div 加 clear: both 就能“清掉自己”，其实没意义——浮动元素自身已经脱离流了，clear 是控制它**之后的兄弟元素**的位置。
- 正确做法：在需要“换行开始”的那个模块（比如下一个标题、新栏目区）上设置
clear: both - 错误写法：
——这不会让菜单换行，反而可能引发意外间隙菜单 - 更稳妥的写法是加一个空标签：
，但语义差，建议用伪元素替代
现代替代方案：为什么现在少用 clear？
clear 是为浮动布局时代设计的补救手段，而浮动本身已不是主流布局方式。它的问题在于：
- 必须精确知道哪个元素要“断行”，一旦结构变动就得手动改
clear - 嵌套浮动时，
clear只作用于同级兄弟，父容器高度塌陷问题还得额外处理（比如overflow: hidden或::after伪元素） - 响应式场景下，浮动 +
clear很难优雅适配多列到单列的切换 - 推荐优先用
display: flex或display: grid替代浮动布局，天然规避顺序失控问题
真要用浮动，怎么避免反复加 clear？
如果项目受限必须用浮动（比如兼容老 IE），可以用 CSS 伪元素自动清理，比到处写 clear 更可靠：
立即学习“前端免费学习笔记（深入）”；
- 给浮动元素的父容器加一个类，比如
.clearfix - 用
::after在末尾插入内容并清除浮动：.clearfix::after { content: ""; display: table; clear: both; } - 这样所有子浮动都会被包裹住，父容器高度正常，后续模块自然从下一行开始，不用每个地方都加
clear - 注意：
display: table兼容性好；若需支持 IE6/7，可改用display: block+height: 0; visibility: hidden;
clear 是必要但脆弱的补丁。真正难控的不是 clear 本身，而是浮动带来的隐式依赖——你得时刻记住谁浮了、谁该清、清完会不会影响下一层嵌套。 
