浮动列表项错位主因是总宽超100%，源于四舍五入、border/padding未计入、父容器内边距干扰及高度塌陷；应统一box-sizing、清除浮动、用calc()控宽或改用flex+gap。
浮动列表项用百分比宽度仍错位，是因为没控住总宽误差
百分比宽度本身没问题，但浮动+百分比容易因四舍五入、border/padding未计入、父容器内边距干扰等原因，导致每行实际总宽略超100%，最后一项被挤到下一行。浏览器对小数像素的处理（如 33.33% × 3 = 99.99%）也会引发视觉错位。
关键不是换单位，而是让“所有项加起来刚好等于父容器可用宽度”。
- 给父容器显式设置
box-sizing: border-box，并清除默认padding和margin：ul { margin: 0; padding: 0; } - 子项统一用
box-sizing: border-box，确保width+padding+border不溢出 - 避免混合使用
%和px：比如width: 33.33%; margin-right: 10px;三列必破，应改用calc(33.33% - 10px)或全用fr（见后文） - 检查父容器是否带
padding或border——它会压缩子项可用宽度，此时子项百分比应基于innerWidth计算，而非容器声明宽度
float + 百分比必须配 clear 或 BFC，否则高度塌陷会放大错位
浮动元素脱离文档流，父容器高度坍缩后，可能影响后续布局判断，尤其在响应式断点切换时，错位现象会突然加剧——你以为是宽度问题，其实是父容器“看不见”子项高度了。
不推荐用空标签 ，既冗余又难维护。
- 最简方案：
ul { overflow: hidden; }（触发 BFC，自动包裹浮动子项） - 更规范写法：给
ul::after添加伪元素清除浮动：content: ""; display: table; clear: both; - 若父容器已有
position: relative或display: flow-root，也能触发 BFC，无需额外 hack
真正稳定的百分比方案：用 calc() 消除 margin 累积误差
单纯设 width: 33.33% 并加 margin-right: 16px，三列总宽 = 99.99% + 32px → 必然溢出。要用 calc() 把 margin 显式扣掉。
假设每行 3 列，间距 16px，则每项宽度应为：calc((100% - 32px) / 3)（32px = 2 × 16px，末项无右 margin）
- 对应 CSS：
li { float: left; width: calc((100% - 32px) / 3); margin-right: 16px; } - 末项清除右 margin：
li:nth-child(3n) { margin-right: 0; } - 注意：IE9+ 支持
calc()，若需兼容 IE8，退回固定像素或改用inline-block
别硬扛浮动，现代项目直接切 flex + gap
浮动本就不是为等分布局设计的。你花一小时调 calc() 和清除浮动，不如 30 秒换成 flex——gap 天然不占内容宽度，flex-wrap 自动换行，flex-basis 控制单列基准，完全规避百分比四舍五入和 margin 溢出问题。
示例：
ul {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
li {
flex: 0 0 calc((100% - 32px) / 3); /* 同样可配 calc，但 gap 已接管间距 */
}
如果连 calc() 都不想写，就用 flex: 0 0 33.33% + gap，浏览器会自动微调各列宽度以填满容器，且不会溢出——这是浮动永远做不到的。
真正容易被忽略的点：浮动错位往往不是某一行的问题，而是整个浮动上下文里，任意一个未清除、未控宽、未统盒模型的元素，都会成为多米诺骨牌的第一张。别只盯着 li 调，先看 ul 的 box-sizing 和 overflow。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
