仿谷歌搜索页：如何将导航栏固定在页面右上角？

使用float:right会让导航栏脱离正常文档流，导致后续的logo元素向上填充它原本的位置，因此出现了两者处于同一水平线的情况。这里提供两种可行的解决方法：

方案一：清除浮动 #

给logo的样式添加clear: both，强制它在浮动元素下方渲染：

修改后的CSS代码：

.nav {
  padding: 10px;
  margin-right: 25px;
  float: right;
}

.logo {
  padding: 20px;
  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;
  width: 30%;
  clear: both; /* 添加清除浮动规则 */
}

方案二：使用Flex布局（推荐） #

放弃浮动，采用更现代的Flex布局实现导航栏右对齐，从根源避免文档流问题：

修改后的CSS代码：

/* 给body设置Flex垂直排列，作为页面布局容器 */
body {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.nav {
  padding: 10px;
  margin-right: 25px;
  align-self: flex-end; /* 让导航栏靠右对齐 */
}

.logo {
  padding: 20px;
  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;
  width: 30%;
}

HTML代码无需修改。Flex布局的优势在于逻辑更直观，不需要处理浮动带来的额外问题，也更便于后续的响应式布局调整。

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