根本原因是width仅指内容区，而实际占位=width+padding+border+margin；需用开发者工具查border-box width验证是否超限，并用box-sizing:border-box或calc()精准控制。
浮动元素百分比宽度折行的根本原因
不是浏览器算错了，是你写的 width: 50% 和浏览器最终渲染出的「视觉总宽」根本不是一回事。默认 box-sizing: content-box 下，width 只管内容区，但浮动元素实际占位 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right。只要父容器有 padding: 1px，两个 width: 50% 就必然超限——它没掉行，是被挤下去的。
怎么手动验算是否真超限
别只看 Styles 面板里写的值，要看浏览器算完后的实际结果：
- 打开开发者工具，选中浮动元素，切到 Computed 标签页
- 重点对比两项：
width（你设的）和border-box width（它真正占多大） - 把所有浮动子元素的
border-box width加起来，再跟父容器的content box width比 - 临时给所有浮动项加
box-sizing: border-box，能立刻排除padding/border干扰 - 注意
margin：左右两个浮动项之间若都写了margin-right: 10px，那不是 10px 间隙，而是 20px 叠加
calc() 扣减比死磕百分比更可靠
小数像素在缩放、高 DPI 屏幕下四舍五入失准是常态，靠 width: 33.333% 赌浏览器怎么算，不如直接告诉它“我要留多少空”：
- 4 列等宽 + 每列间
margin: 0 10px→ 总间隙 = 3 × 20px = 60px → 写成width: calc((100% - 60px) / 4) - 若父容器还有
padding: 10px→ 左右共 20px → 改为width: calc((100% - 60px - 20px) / 4) - 避免写
width: 99.9%这类临界值，缩放后小数部分取整反而更不稳定 -
calc()在 IE9+、现代所有浏览器都支持，兼容性不是问题
为什么改用 flex 布局能绕过所有这些计算
因为 display: flex 的主轴排列逻辑根本不依赖「每个子项自己算宽」，而是由容器统一分配空间：
立即学习“前端免费学习笔记（深入）”；
- 父容器设
display: flex，子元素自动横向排列，不换行（除非显式设flex-wrap: wrap） - 用
flex: 1或flex-basis: 0+flex-grow: 1实现等宽，完全避开百分比精度、box-sizing、margin叠加等干扰 - 间隙用
gap控制，不污染子项 margin，也不触发 BFC 或清除浮动需求 - 缩放时 flex 主轴天然重排，不会出现亚像素错位导致的掉行
浮动布局里最耗时间的从来不是写代码，而是反复调样式、清缓存、切设备看效果——这些计算细节一旦漏掉一项，就可能让页面在某个缩放比例下突然错位。真正要盯住的，是浏览器最终画出来的那个 border-box width，而不是你敲进去的那行 width: 50%。
