浮动换行错位本质是宽度失控，需用box-sizing: border-box钉死宽度、消除html空格、合理设margin；clear: both仅对块级元素生效且须置于浮动后首个文档流位置；现代项目应改用flex或grid布局。
浮动元素换行后视觉错位，本质是宽度失控
不是clear没写对，而是某几个元素实际占宽超出了父容器。浮动本身不感知“行”，只按文档顺序一个挨一个贴边；一旦某个元素因padding、border或HTML空格多占了几像素，整行就崩了。
关键动作是把宽度钉死：
-
box-sizing: border-box必须加在所有浮动项上，否则width: 25%+padding: 8px会溢出 - 显式设
width，别依赖内容撑开；4列均分就用width: calc(25% - 8px)（假设左右各4px间距） - HTML里浮动元素之间不要换行或空格，否则渲染器可能插入约4px间隙
- 最后一项用
.item:not(:last-child) { margin-right: 8px; }，避免换行后右侧留白
clear: both加在哪才真正起作用
clear: both不是“清浮动”，而是“让当前元素避开上方浮动兄弟”。它只对块级元素生效，且只在它前面真有浮动兄弟时才触发换行。
常见误操作：
- 给浮动元素自己加
clear: left——完全无效，它只影响自身位置，不控制同行与否 - 把
clear: both写在<table>上却不管它的父容器是否塌陷——表格还在“空气”里，clear再狠也踩不到地<li>在浮动容器外层套了个<code><div class="wrapper">，却把clear加在<code><footer></footer>上——中间隔着wrapper，clear找不到参照物正确做法：清除动作必须落在最后一个浮动元素之后、且是文档流中第一个块级位置。通常就是浮动容器的
::after伪元素，或直接给该容器设display: flow-root。现代项目里，别硬修float，直接换布局模型
浮动本为图文环绕设计，拿它做网格布局等于天天用螺丝刀拧螺丝——能转，但费劲还易滑丝。你花半天调
margin和clear，不如三行CSS切到display: flex或display: grid。迁移要点：
- 删掉所有
float: left、clear: both、overflow: hidden补丁 - 父容器改
display: flex+flex-wrap: wrap，子项用flex: 1 1 300px控制最小宽度 - 需要二维定位（比如两栏+头部+底部）就上
display: grid，grid-template-areas比float+clear直观十倍 - 兼容性够用：
display: flow-root（Chrome 58+/Firefox 57+/Safari 10.1+）已覆盖绝大多数场景；仅需支持IE11时，退回到overflow: hidden即可
响应式下浮动换行更难调，因为断点会放大微小偏差
桌面端看着整齐的四列，在移动端缩成两列时，常出现第一行两个按钮左对齐、第二行两个按钮右偏移——这不是bug，是浮动在不同容器宽下重新计算贴边位置的结果。
此时靠
calc()和nth-child已经很难兜住，真正省事的做法是：- 媒体查询里直接切换布局：
@media (max-width: 768px) { .container { display: flex; flex-direction: column; } } - 避免在浮动布局里混用
text-align: right或direction: rtl，它们会干扰浮动顺序，调试时极难定位 - 如果必须保留float（比如维护老系统），至少把换行临界点控制在
min-width明确的断点上，别依赖浏览器自动折行
最常被忽略的一点：你正在调试的“错位”，往往不是CSS写错了，而是你还在用2005年的布局思路解决2026年的问题。换模型比调参数快得多。
- 删掉所有
