浮动导航换行后第一行末尾空白源于html换行符被解析为空格字符，在font-size:16px下撑开约4px宽度；应压成一行、设父容器font-size:0并重置子元素字号，或改用flex布局。
浮动导航换行后第一行末尾多出空白
这不是 margin 没生效，而是 HTML 换行符被解析为空格字符，撑开了行框。只要导航项写成多行：<li><a>首页</a></li>\n<li><a>产品</a></li>，浏览器就会在它们之间插入一个 U+0020 空格。父容器 font-size: 16px 时，这个空格在默认 line-height 下约占 4px 宽度，导致最后一项右偏、换行后首项左悬空。
实操建议：
- 把所有
<li>压成一行（开发阶段可借助构建工具或模板语法自动.join('')） - 或给导航容器设
font-size: 0，再给<a></a>显式重置font-size: 14px - 避免用
vertical-align: middle试图“对齐”——它对float: left的块级元素无效
清除浮动后导航下方突然多出一段空白
这通常不是 clear: both 加错了，而是清除动作没真正恢复父容器高度，或者清除元素自身带默认 margin。比如在 <ul class="nav">...</ul> 后加了 <div style="clear:both"></div>，这个 <div> 是块级元素，默认有 <code>margin-top 和 margin-bottom，视觉上就成了“多余空白”。
实操建议：
- 优先用伪元素清除：
.nav::after { content: ""; display: table; clear: both; }，不插入 DOM 节点 - 若必须用空 div，显式重置：
height: 0; margin: 0; font-size: 0; line-height: 0; - 更现代的做法是直接给
.nav设display: flow-root，既清浮又无副作用
响应式下导航换行顺序反常（从左到右变成右到左）
浮动本身没有“行概念”，换行完全由容器宽度和元素总宽度决定。但如果你在媒体查询里改了 direction: rtl 或全局设置了 text-align: right，而导航项又是 float: left，就会出现“逻辑顺序不变、视觉顺序翻转”的现象——HTML 仍是 首页→产品→关于，但渲染时从右往左贴边。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
实操建议：
- 检查是否意外继承了
direction或text-align，尤其来自重置样式表或 CMS 模板 - 避免在浮动导航上混用
float和text-align；如需右对齐，统一用float: right并保持 HTML 顺序反转 - 真要响应式换行对齐，改用
display: flex+flex-wrap: wrap，语义清晰且可控
IE8–9 中导航按钮间总有 3px 间隙
这是 IE 的经典 bug：浮动的行内级元素（比如含文字的 <a></a>）会额外生成约 3px 的底部空白，本质是基线对齐残留空间。哪怕你设了 margin: 0、line-height: 0，它还在。
实操建议：
- 给导航容器设
font-size: 0，再给<a></a>单独设字体（必须显式，不能靠继承） -
<a></a>加display: block，彻底脱离行内上下文 - 图标别用
<img>，改用背景图或 inline SVG，并配vertical-align: top
