浮动导航栏应使用 position: fixed 而非 float，因 float 本用于图文环绕，无法实现视口固定悬浮，会导致滚动消失、父容器塌陷、定位失效；fixed 定位配合 top/left、z-index 和 body padding-top 才是正确解法，并需针对移动端缩放、软键盘、横竖屏等边界场景做适配。
浮动导航栏不是靠 float 实现的，用 position: fixed 才是现代正确解法；强行用 float 会导致布局错乱、响应失效、滚动时消失——这是初学者最常踩的坑。
为什么不用 float 做悬浮导航
float 的本职是图文环绕，不是定位。它会让元素脱离文档流，但不会“悬停”在视口固定位置：
- 滚动页面时，
float元素会随内容一起滚走，根本达不到“悬浮”效果 - 父容器高度塌陷问题频发，后续元素上移覆盖导航
- 无法设置
top/right等视口坐标，只能相对父块左/右对齐 - Flex/Grid 布局普及后，
float已被明确标记为“遗留技术”，MDN 不再推荐用于布局
position: fixed 的最小可行实现
真正让导航“粘”在屏幕顶部（或底部）的关键是 fixed 定位 + 显式坐标：
<nav class="navbar"><a href="#home">首页</a> <a href="#about">关于</a> <a href="#contact">联系</a> </nav>
对应 CSS：
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
z-index: 1000;
}
<p>/<em> 防止正文被遮挡 </em>/
body {
padding-top: 60px; /<em> 值 ≈ 导航栏高度 </em>/
}</p>
-
z-index必须设足够高（如1000），否则可能被图片、模态框盖住 -
padding-top加在body上，比给首屏内容加margin-top更稳妥——避免 JS 动态插入内容时漏处理 - 不要用
height: 100vh或min-height撑开导航，固定定位元素本身不占文档流空间
移动端适配和常见断裂点
固定导航在手机上容易出问题：缩放时错位、软键盘弹出后消失、iOS Safari 滚动卡顿：
- 必须加
viewportmeta：<meta name="viewport" content="width=device-width, initial-scale=1"> - iOS Safari 中，
fixed元素在input获焦、软键盘弹出时会“掉下去”，临时解法是监听focusin强制重绘：element.style.transform = 'translateZ(0)' - 小屏下别用
white-space: nowrap强行单行，改用媒体查询折叠为汉堡菜单，否则文字溢出或按钮挤压失效 - 避免在
fixed导航里放position: absolute下拉菜单——层级和定位基准混乱，改用position: relative包裹 +absolute子项
真正难的不是写出来，而是让 fixed 导航在各种缩放、横竖屏切换、键盘呼出、第三方插件注入 DOM 的场景下都不偏不移——这些边界情况，调试时往往要真机连 Safari Web Inspector 才能复现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
