手机端浮动列表挤在一起的解决方案是用媒体查询重置布局：小屏下清除float设为block或改用flex布局，并调整宽高、内外边距及字体大小。
手机端浮动列表挤在一起，本质是 float 在小屏幕下没做适配。响应式方案不是“取消 float”，而是用媒体查询在小屏下重置布局方式，把浮动元素转为垂直堆叠的 block。
用媒体查询覆盖 float 样式
在 PC 端用 float 实现横向排列，到手机端用 @media 把 float 清除，并设为块级显示：
- 给列表项（如
.nav-item或li）原本设float: left - 在
@media (max-width: 768px)内加：.nav-item {
float: none;
display: block;
width: 100%;
} - 顺手清除父容器浮动（如加
overflow: hidden或用 BFC），避免高度塌陷
更推荐：直接改用 flex 布局（现代写法）
float 本就不是为导航/列表布局设计的，flex 更可控、更语义化：
- PC 端：父容器设
display: flex，子项自动横排 - 手机端：同一父容器，在媒体查询里改成
flex-direction: column - 无需清除浮动，无塌陷问题，还能轻松控制对齐、间距、换行
注意宽度和内边距的响应式重置
光改 display 不够，挤还可能因为固定宽或过大的 padding/margin：
立即学习“前端免费学习笔记（深入）”；
- 移除子项的
width（如width: 200px），让其自然撑满 - 缩小手机端的
padding和margin，比如从15px改为10px或8px - 字体大小也建议同步调小，避免文字溢出或换行异常
验证是否生效的小技巧
- 看
float是否已变成none - 确认
display是block或flex - 观察父容器高度是否正常（不再为 0）
