浮动列表项错位是因浮动元素脱离文档流导致父容器高度坍缩，矮项右侧留白使后续项上浮钻空隙；根本解法是让ul触发BFC（如overflow:hidden、display:flow-root或clearfix），并精确控制li宽度与间距（box-sizing:border-box+calc()），现代项目应直接改用flex或grid布局。
为什么浮动列表项会错位
错位不是 bug，是 float 的设计逻辑：浮动元素脱离文档流，父容器高度坍缩，矮项右侧留白，后续项“上浮”钻空隙。常见现象包括底部参差、序号消失、margin-bottom 失效、换行混乱——这些全是同一根源的表象。
ul 触发 BFC 是最直接的修复动作
不修 li，先稳住 ul。BFC（块级格式化上下文）能让父容器重新包裹所有浮动子项，恢复高度计算和对齐基准：
-
overflow: hidden最简，兼容 IE6+，但可能意外裁剪box-shadow或下拉菜单 -
display: flow-root专为此设计，无副作用，Chrome 58+/Firefox 53+/Safari 10.1+ 全支持 - 伪元素 clearfix：
.clearfix::after { content: ""; display: table; clear: both; }，适合需兼容 IE8 的老项目 - 避免
overflow: auto—— 某些旧版 Safari/IE 可能触发滚动条或重绘抖动
li 宽度和间距必须精确控制
百分比宽度 + 浮动极易因四舍五入、border/padding 未计入、父容器 padding 干扰而超 100%，导致最后一项掉行：
- 所有浮动
li必须设box-sizing: border-box - 父
ul清除默认padding和margin：ul { margin: 0; padding: 0; } - 用
calc()扣除间距：4 列带 12px 间隔 →width: calc((100% - 36px) / 4)（36px = 3 × 12px） - HTML 中浮动
li之间不要换行或空格，否则渲染器插入约 4px 间隙
现代项目里，停用 float 是成本最低的解法
你花半天调 clear、overflow、vertical-align，不如三行 CSS 切到语义清晰、行为可预测的布局模型：
立即学习“前端免费学习笔记（深入）”；
- 横排列表 →
ul { display: flex; flex-wrap: wrap; }，li用flex: 1 1 calc(25% - 8px) - 二维栅格 →
ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))); } - 序号正常显示 →
ol不再依赖padding-left补救，天然保留语义与计数器 - 响应式断点不再放大微小偏差 —— flex/grid 在不同容器宽下自动重排，不靠“贴边”逻辑
真正容易被忽略的是：浮动错位从来不是样式写得不够细，而是你在用图文环绕机制强行做布局。工具用错了，补丁越打越多。
