浮动实现等宽菜单仅适用于老项目兼容，需手动计算百分比且易因四舍五入或边框溢出导致掉行；flex-grow与float互斥，无法共存；响应式下浮动需重复调整，而flexbox更简洁可靠。
浮动实现等宽菜单现在基本只用于兼容老项目或特定嵌入场景，float 本身不支持“自动均分”逻辑，必须手动计算百分比；而 flex-grow 是 Flexbox 的能力，和浮动完全无关——两者不能混用。别被标题误导，这是两个互斥的技术路径。
float + 百分比宽度：必须手算且小心四舍五入
浮动菜单要等宽，核心是让每个菜单项设置相同的 float: left 和精确的百分比宽度。例如三列菜单：
-
width: 33.33%是常见写法，但 IE8 及更早版本对小数点后位数敏感，可能四舍五入成 33%，三列总宽只剩 99%，最后一列掉行 - 两列用
width: 50%相对安全，但加了border或padding后会溢出——必须加box-sizing: border-box - 父容器必须清除浮动，否则高度塌陷，菜单下方内容上移；推荐用
overflow: hidden，比伪元素更轻量
flex-grow 无法和 float 共存
flex-grow 只在 display: flex 容器中生效，一旦元素设置了 float，它就脱离文档流，Flexbox 完全感知不到它——此时写 flex-grow: 1 毫无作用。
如果你看到“float + flex-grow”同时出现，那说明：
- 要么 CSS 规则被覆盖（比如后面有
display: block覆盖了flex） - 要么开发者误以为两者可叠加，实际浏览器已忽略
flex-grow - 检查 computed styles，确认该元素最终
display值不是flex，就别谈flex-grow
菜单项之间留空隙的两种可靠方案
纯浮动下没法用 gap，但有成熟解法：
- 用
margin-right+calc()：比如四列，写width: calc(25% - 10px)，再给每项设margin-right: 10px，最后一项用:last-child { margin-right: 0 } - 用
padding-right+background-clip: content-box：避免 padding 影响背景色延展，适合带背景色的菜单项 - 千万别用
margin却不重算宽度——那是浮动布局塌行最常见原因
真正麻烦的不是写法，而是浮动菜单在响应式断点里必须重新写一遍宽度和清除逻辑；而现代项目里，一个 display: flex 配合 flex: 1 就能扛住所有屏幕变化。除非你正在修 IE8 的遗留系统，否则别把时间花在调 float 上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
