移动端浮动元素宽度禁用px而需用百分比，因px固定值易超容器引发错位或滚动；百分比依赖父容器可伸缩宽度（如width:100%）、box-sizing:border-box防padding/border溢出，并配合媒体查询在断点（如600px）改float:none实现流式布局。
浮动元素宽度为什么不能用 px
固定像素宽度在移动端会直接“卡死”布局。比如 width: 300px 在 iPhone SE 屏幕（375px 宽）上就超出了容器，触发横向滚动或换行错位。更隐蔽的问题是：即使没溢出，不同设备下元素比例完全失衡——同一份 CSS，在 iPad 上显得稀疏，在安卓小屏上挤成一团。
用百分比不是为了“看起来像响应式”，而是让浏览器根据父容器实时计算像素值。关键前提是：父容器本身得有可伸缩的宽度（比如 width: 100% 或 max-width: 1200px），否则子元素的百分比无从依附。
-
width: 50%是相对于父容器当前渲染宽度，不是视口也不是设计稿标注 - 如果父容器写了
padding: 20px但没设box-sizing: border-box，那它的实际内容区宽度 = 标称宽度 − 40px，子元素按 50% 算就会超 - 避免写
width: 33.33%这类无限循环小数——浏览器四舍五入后多个元素加起来常超 100%，最后一列掉下去
怎么写才不会让浮动元素在小屏上错位
错位本质是“该换行时没换行，不该换行时却换行”。常见于两栏变单栏的临界点，比如屏幕缩到 600px 以下时，两个 float: left; width: 48% 的盒子还硬扛着并排，结果文字重叠或溢出。
正确做法是在媒体查询里主动放弃浮动，改用块级流式排列：
.column {
float: left;
width: 48%;
margin: 1%;
box-sizing: border-box;
}
@media (max-width: 600px) {
.column {
float: none;
width: 100%;
margin: 0 0 1rem 0;
}
}
- 清除浮动必须同步处理：父容器加
overflow: hidden或伪元素::after，否则高度塌陷会导致后续内容上移 - 小屏下别只改
float: none，顺手加上display: block更稳妥，防止某些旧版 Android 浏览器残留 inline 行为 - 断点选 600px 而非 768px，因为很多中低端安卓机物理分辨率接近这个值，实测更准
box-sizing 和 calc() 怎么配合防误差
百分比 + padding/border 是浮动错位的高发组合。默认 box-sizing: content-box 下，width: 50% 只管内容区，左右各加 padding: 10px 就多出 20px，两个盒子加起来实际占宽 >100%。
最简解法是全局重置：* { box-sizing: border-box; }。但如果项目已有历史样式冲突，可局部加：
.column {
width: 49%;
padding: 10px;
box-sizing: border-box;
}
当需要精确三等分又怕四舍五入误差时，用 calc() 拆解固定开销：
.column {
width: calc(33.3333% - 2px); /* 假设左右 margin 共 2px */
}
-
calc()在 IE9+ 支持，但 IE9 要求运算符两侧必须有空格：calc(100% - 2px)合法，calc(100%-2px)报错 - 别嵌套
calc(calc())，移动端部分 WebView 解析失败 - 优先用
flex替代浮动——但若维护老项目，calc()+border-box是最可控的兜底方案
viewport 设置和父容器宽度容易被忽略
再精准的百分比也救不了没设 viewport 的页面。如果 HTML 里漏了这句：，移动端 Safari 会以 980px 宽度渲染，所有百分比都基于这个假宽度计算，结果整个布局缩成一团。
另一个隐形坑是父容器自身宽度不可伸缩。例如：
.wrapper {
width: 1200px; /* 固定死，子元素 % 白写 */
}
.column {
width: 50%; /* 实际永远是 600px，不随屏幕变 */
}
- 把
width: 1200px换成max-width: 1200px; width: 100%，子元素百分比才能真正流动起来 - 如果父容器用了
position: absolute且没设left/right，它可能脱离文档流，导致宽度计算基准失效 - 用 Chrome DevTools 的 “Computed” 面板直接看父容器真实宽度值，别信你写的 CSS 注释
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
