float实现导航栏左对齐的实质限制是脱离文档流导致父容器高度塌陷，须清除浮动；项间距应使用margin而非padding；ie6–7存在双倍margin bug，需display:inline修复；float本身不支持自动换行，响应式需切换布局方式。
float 实现导航栏左对齐的实质限制
用 float: left 让导航项横向排列，本质是脱离文档流——这意味着父容器高度塌陷，后续元素会上移。这不是“居左”本身的问题，而是浮动副作用没处理。常见错误现象是导航栏下面的 div 紧贴着顶部，或背景色只显示一行高。
必须配合清除浮动，否则布局会不可控。现代项目更推荐用 display: flex，但若需兼容 IE8–9 或维护老代码，float 仍需用，只是得补上 clearfix。
padding 不能替代 margin 控制项间距
很多人给 li 加 padding-right 想拉开菜单项，结果最后一项右边多出空白，响应式时容易溢出。这是错把内边距当外边距用——padding 是内容区域的延伸，会影响点击热区和背景渲染范围；而 margin 才是控制兄弟元素间距的正确方式。
- 项间间距统一用
margin-right（除最后一项） - 若用
padding，仅用于增加文字与边框距离，比如让文字不贴着a标签的左右边界 - 避免在浮动元素上同时设
padding和margin做同一方向的间距调整，易混淆计算逻辑
IE6–8 下 float 导航的双倍 margin bug
在 IE6/7 中，浮动元素的 margin-left 或 margin-right 会被渲染成两倍值。比如设了 margin-right: 10px，实际显示 20px。这不是 CSS 写错了，是 Trident 引擎的解析缺陷。
修复方法不是调小数值，而是加 display: inline 到浮动元素上（如 li 或 a），这个 hack 能触发 IE 的“hasLayout”机制，让 margin 正常计算。注意：只对 IE6–7 有效，现代浏览器加了反而可能干扰布局。
示例：
nav li {
float: left;
margin-right: 15px;
display: inline; /* 仅针对 IE6–7 的修复 */
}
float 导航无法响应式收缩的根源
浮动元素默认不换行，当容器变窄时，它们不会自动折行，而是挤出容器右侧、甚至重叠。这不是媒体查询没写好，而是 float 本身不具备弹性行为。想靠 @media + float 做响应式导航，必须手动控制断点处的宽度和 clear，非常脆弱。
真正可靠的方案是：在小屏下直接关闭 float，改用 display: block + text-align: center，或者切换为 flex。如果坚持用 float，至少要在断点处加 clear: both 防止错位。
容易被忽略的一点：浮动导航的子菜单（下拉）如果也用 float 实现，父级 position: relative 必须显式设置，否则下拉层定位会失准——因为浮动元素的包含块不是父容器，而是最近的非浮动祖先。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
