多行浮动元素错位主因是父容器宽度临界值导致浏览器像素四舍五入换行；需检查实际可用宽度、box-sizing、字体渲染差异，并用calc()精确计算含边框/外边距的子项宽度，或直接改用flex布局。
多行浮动元素突然换行错位，先看父容器宽度够不够
浮动元素排成多行时错位、最后一行缩进、或者某几个项被挤到下一行——八成是父容器宽度刚好卡在临界点，浏览器按像素四舍五入后“以为”放不下，就强行换行。float 本身不处理“流式对齐”，只管左/右贴边，一旦总宽度超了哪怕 1px，整行都会塌。
- 用浏览器开发者工具选中父容器，看
Computed里的width和padding + border是否导致内容区实际可用宽度缩水 - 子元素设了
box-sizing: border-box但父容器没设？会导致父容器的padding额外吃掉空间 - 字体渲染差异（比如 macOS 的 subpixel antialiasing）会让文字宽度浮动，间接影响
inline-block或float元素的总占宽
用 calc() 算出安全宽度，别信“写死 25% 就能四等分”
四个 float: left 元素各设 width: 25% 看似合理，但只要加了 margin 或 border，总宽立刻超 100%，触发换行。必须把所有额外尺寸塞进 calc()。
- 例如每个项有
1px边框和8px水平 margin：width: calc(25% - 2px - 16px)（边框左右共 2px，margin 左右共 16px） - 如果用
rem或em，确保根字号没被 JS 动态改过，否则calc()结果会漂移 - IE9+ 支持
calc()，但不支持嵌套函数，像calc(100% / 4)会直接失效，得写成calc(25%)
clear: both 放错位置会让后续浮动全乱套
清除浮动不是“清一次就完事”。如果在多行浮动中间插了个 clear: both，它会强制中断当前行，把后面所有浮动元素推到新起的一行，造成视觉断层。
- 只在整组浮动结束之后加清除元素，比如：
<div style="clear: both"></div> - 更稳妥的做法是给父容器触发 BFC：
overflow: hidden或display: flow-root（后者现代浏览器支持好，且不影响overflow行为） - 用
::after伪元素清除时，确认父容器没设height固定值，否则伪元素高度可能被截断，清除失效
现代场景下，float 排列不如 display: flex 可控
除非要兼容 IE9 及以下，否则真没必要硬扛 float 布局。Flex 能天然处理换行、对齐、空间分配，而且不会因为像素误差崩掉整行。
- 替代方案：
display: flex; flex-wrap: wrap;，子项用flex: 0 0 calc(...)控制基础宽度 - 注意
flex-basis设为auto时，会先按内容宽度算，再缩放，容易和预期不符；设为具体值（如calc(25% - 16px)）更稳 - Flex 容器默认
align-items: stretch，如果子项高度不一，看起来像错位，加align-items: flex-start就正常了
浮动排列的脆弱性藏在像素级计算里，改一个 border、调一次 font-size、甚至切个分辨率，都可能让整排重新洗牌。与其反复调 calc，不如直接切 Flex —— 除非你正在维护一个十年前写的后台系统，连 display: flex 都要垫个 polyfill。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
