浮动换行错乱的根本原因是宽度失控、脱离文档流与html空白三者叠加；必须同步控制box-sizing、display:flow-root和html间隙，单靠clear:both无法根治。
浮动元素换行错乱，根本不是“没清浮动”，而是宽度失控 + 脱离文档流 + HTML空白三者叠加的结果。直接加 clear: both 或改 margin 很难根治，必须同步控制盒模型、渲染上下文和元素间间隙。
为什么 width: 25% 四列还是换行错位？
因为浏览器按像素四舍五入判断换行点，而 width: 25% 没扣掉 padding 和 border，实际总宽轻松超 100%；HTML 中换行符还会被解析为约 4px 空格，进一步挤爆容器。
- 必须全局设
* { box-sizing: border-box; }，否则padding: 8px会让width: 25%实际变成25% + 16px - 用
calc()精确控宽：4 列带左右各 8px 间距 →width: calc((100% - 48px) / 4) - HTML 中浮动项之间不能换行或空格：
<div class="item"></div> <div class="item"></div>，而非分行写 - 避免小数百分比（如
33.333%），改用整数 + 固定margin组合留容错空间
display: flow-root 比 overflow: hidden 更安全
overflow: hidden 虽能触发 BFC 解决父容器塌陷，但会意外裁剪 position: absolute 下拉菜单、box-shadow 或 transform 位移后的内容；display: flow-root 是专为此设计的，无副作用，且现代浏览器（Chrome 64+、Firefox 58+、Safari 12.1+）已全面支持。
- 给浮动容器（如
.grid）直接加display: flow-root，一行生效 - 别在同一个容器上再设
height或max-height，否则可能截断内容或伪元素 - 需兼容 IE11 时，退回到
.grid::after { content: ""; display: table; clear: both; }，并补*zoom: 1
响应式断点里只写 clear: both 完全无效
clear: both 不是“取消浮动”，它只让当前块级元素避开上方浮动兄弟，对浮动元素自身脱离文档流的状态毫无影响。小屏错位的根源是 float: left 还在生效，父容器继续塌陷。
- @media 中必须同步重置三项：
float: none（退出浮动）、width: 100%（防width: auto收缩/撑开）、margin-right: 0（清残留右距） - 嵌套浮动时，媒体查询要落在每一层浮动容器上，比如
.sidebar和.tag-list都得单独加display: flow-root - 验证方法：打开 DevTools，选中容器，在 Computed 面板确认
display值未被覆盖，且高度不为 0
最容易被忽略的是——浮动布局下，你调的不是“换行”，而是不断在对抗它脱离文档流的本质。一旦涉及多行对齐、等高、响应式断点切换，错位就从概率事件变成必然结果。真要长期维护，display: grid 或 display: flex 不是升级选项，是止损底线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
