浮动导航在小屏幕不换行的根本原因是父容器未形成bfc、子项宽度计算溢出、媒体查询未切断float逻辑；需同时满足触发bfc、box-sizing: border-box、在断点中重设width并取消float。
浮动导航在小屏幕不换行，根本原因不是“float没生效”，而是父容器没形成BFC、子项宽度计算溢出、或媒体查询没切断float逻辑。直接加flex-wrap: wrap不行——那是Flex的事，你还在用float。
为什么float导航在小屏死活不换行
常见错误现象：.nav-item全挤在一行，横向滚动，或直接溢出容器看不见。这不是浏览器bug，是三个硬性条件没同时满足：
- 父容器没触发BFC（比如漏了
overflow: hidden或display: flow-root），导致高度塌陷，子项“不知道边界在哪” - 子项
width设成50%但没配box-sizing: border-box，加上padding和border后实际宽超50%，两列就塞不下 - 没在小屏断点里显式取消
float，浏览器仍按“尽可能横排”渲染，哪怕容器只剩200px宽
用媒体查询切断float并控制每行数量
别指望float自己“感知宽度换行”，得靠媒体查询手动切。关键不是调float，是改width + float组合：
- 桌面端：每行4项 →
width: 25%+float: left - 平板（600px起）：每行2项 →
@media (min-width: 600px) { .nav-item { width: 50%; } } - 手机（@media (max-width: 599px) { .nav-item { float: none; width: 100%; } }
- 如果还想保留“每行2个”的视觉节奏（比如图标+文字组合），用
:nth-child(2n+1) { clear: left; }强制奇数项开头换行
老项目修bug时优先检查这三处
维护遗留代码时，别重写布局，先定位真实卡点：
- 父容器是否带
overflow: hidden或display: flow-root？没这两条，width再小也白搭 - 所有
.nav-item是否统一写了box-sizing: border-box？尤其注意第三方UI库可能覆盖了它 - 有没有祖先元素写了
white-space: nowrap？比如某个.header上误加了这个，会整条导航都禁用换行 - 检查是否有
display: inline-block和float混用——这两者叠加会让换行逻辑彻底失效
浮动布局的换行本质是“尺寸挤压触发”，不是流式行为。真正省心的解法是把float换成display: flex配flex-wrap: wrap，但若HTML结构不能动，就老老实实控宽、清浮动、切断点——少一个环节，小屏就崩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
