CSS问题：为<nav>添加float:right后导航项跳出顶部栏

这问题我太熟了！给<nav>加float:right后它跳出蓝色顶部栏，核心原因是浮动元素会脱离正常文档流，如果父元素.top_bar没有合适的处理机制，就会因为子元素脱离流而高度塌陷，看起来nav就“跑出去”了。再加上<h3>默认是块级元素、独占一行，也会加剧布局冲突。

先给你拆解几种靠谱的解决方案：

方案1：用BFC包含浮动元素（快速修复） #

给父容器.top_bar添加overflow: hidden，触发BFC（块级格式化上下文），让它自动包含所有浮动的子元素，避免高度塌陷：

.top_bar {
  background: blue; /* 你的蓝色栏背景 */
  overflow: hidden; /* 关键：触发BFC，包裹浮动元素 */
  padding: 0 10px; /* 可选，加内边距让内容不贴边 */
}
.top_bar nav {
  float: right;
}
/* 记得去掉h3默认的上下边距，避免撑开容器 */
.top_bar h3 {
  margin: 0;
}

方案2：用Flex布局（现代推荐） #

直接用Flex布局替代浮动，这是现在处理横向布局最省心的方式，完全不用纠结浮动和清除的问题：

.top_bar {
  display: flex;
  justify-content: space-between; /* 左边放h3，右边放nav */
  align-items: center; /* 让内容垂直居中 */
  background: blue;
  padding: 0 10px;
}
.top_bar h3 {
  margin: 0;
}
/* 这里不需要给nav加float:right了，Flex会自动搞定位置 */

方案3：手动清除浮动（传统方法） #

如果不想用overflow或者Flex，可以给父容器加伪元素来清除浮动：

.top_bar {
  background: blue;
}
.top_bar nav {
  float: right;
}
.top_bar h3 {
  margin: 0;
  display: inline-block; /* 让h3和nav在同一行 */
}
/* 伪元素清除浮动 */
.top_bar::after {
  content: "";
  display: block;
  clear: both;
}

另外提醒下：你的代码里还有个空的<span>，如果没用的话可以删掉，避免影响布局~

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