如何实现导航栏Logo居左、超链接居右的CSS布局？

你之前用float并删除flex容器导致布局错乱，核心问题是float元素会脱离正常文档流，很容易引发父容器高度塌陷、元素错位等问题——完全没必要放弃flex，它本来就是做这类导航布局的最佳工具，用这两种方法就能轻松实现链接右对齐：

方法1：用justify-content: space-between拆分两端 #

如果你的导航栏左侧有logo/品牌名，右侧是链接，直接给导航的flex容器加这个属性，就能让左右元素分别靠紧两端：

.nav-bar {
  display: flex;
  justify-content: space-between;
  /* 保留你原来的padding、背景色、高度等样式 */
}

方法2：用margin-left: auto推送链接到右侧 #

如果导航栏里有多个分组元素（比如左侧是logo容器，右侧是链接容器），给链接容器加margin-left: auto，就能把它挤到最右边，同时不影响其他元素的布局：
假设你的HTML结构是这样：

<nav class="nav-bar">
  <div class="brand">我的网站</div>
  <div class="nav-links">
    <a href="/">首页</a>
    <a href="/about">关于</a>
    <a href="/contact">联系</a>
  </div>
</nav>

对应的CSS：

.nav-bar {
  display: flex;
  align-items: center; /* 让元素垂直居中，可选 */
  /* 其他原有样式 */
}

.nav-links {
  margin-left: auto;
}

你之前的错误在于放弃了flex布局改用float，float是旧时代的布局方案，处理这类横向对齐很容易出问题，用flex的原生属性就能完美解决，还不会破坏布局结构。

内容的提问来源于stack exchange，提问作者Queota