左侧logo左浮动，右侧导航右浮动实现方法

本文深入剖析了使用 float 实现导航栏“左侧 logo 左浮动、右侧导航右浮动”这一经典布局时高频踩坑的三大核心问题：父容器高度塌陷（需通过触发 BFC 解决）、导航折行（源于宽度计算遗漏内外边距与 box-sizing 陷阱）、以及 IE6–8 的兼容性乱象（依赖 display: block 等针对性修复），并明确指出——在现代开发中，flex 布局以简洁、健壮、无副作用的优势全面胜出，除非必须兼容 IE9 及以下，否则不应再为新项目选择 float 这一过时且维护成本高昂的方案。

float 实现左右分栏时，父容器高度塌陷怎么办

浮动元素会脱离文档流，导致父容器无法自动包裹它们，导航栏看起来“没高度”，下面的内容直接顶上来了——这是最常遇到的问题。

• 必须给父容器（比如
• 别用 height: 100px 这类固定高度硬撑，一旦字体大小或 padding 变了，就会错位
• clear: both 放在父容器外部（比如下一个
  上）不能解决父容器自身塌陷，它只影响后续兄弟元素

logo 左浮动 + nav 右浮动，为什么 nav 总被挤到下一行

本质是容器宽度不够：两个浮动块加起来超出了父容器可用宽度，浏览器只能折行。不是代码写错了，是空间算少了。

• 检查 logo 和 nav 的总宽度（含 padding、border、margin），尤其注意默认 ul 有 margin-block（现代浏览器）或 margin-top/margin-bottom（老写法）
• nav 内部的 ul 建议重置： margin: 0; padding: 0;，再用 display: flex 或 inline-block 排列 li，避免浮动嵌套
• 如果用了 box-sizing: border-box，确认它已应用到所有浮动子元素上，否则 padding 会额外撑宽

IE6–8 下 float 导致文字被“吃掉”或换行错乱

老 IE 对 float 和 inline 元素混排极其敏感，常见于 logo 图片旁的文字或 a 标签内嵌 span。

• 给所有参与浮动的元素显式设置 display: block（哪怕它是 a 或 span）
• 避免对 img 单独浮动，改用包裹它的
  或 浮动；并确保 img 没有默认的 vertical-align: baseline 引起基线偏移
• 如果导航链接在 IE 下垂直位置偏低，给 nav 内的 a 加 display: block 和 line-height 对齐

float 方案和 flex 替代方案该怎么选