Navbar元素受其他div中元素float:left规则影响的布局问题

嘿，这个问题我太熟悉了！这是典型的浮动元素导致父容器高度塌陷的问题，咱们完全不用去掉float:left就能搞定～

问题根源 #

当你给h1设置float:left后，这个元素会脱离正常的文档流，它的父容器#header-bar无法正确计算自身的高度（因为浮动元素不再占据正常的文档流空间）。这就导致下面的#navbar会“跑”到#header-bar的区域里，看起来像是被h1的长度影响了。

解决方案（保留float的前提下） #

这里有几个靠谱的方法，按推荐程度排序：

1. 使用Clearfix伪元素（最推荐）

给#header-bar添加一个伪元素来清除浮动，不会添加冗余的HTML元素：

#header-bar::after {
  content: "";
  display: table;
  clear: both;
}

把这段代码加到你的CSS里，#header-bar就能正确计算高度，#navbar也会回到它该在的位置。

2. 给父容器设置overflow属性

这个方法更简单，直接给#header-bar加overflow:hidden或者overflow:auto：

#header-bar {
  overflow: hidden;
}

不过要注意，如果你的#header-bar里有需要超出容器显示的元素（比如下拉菜单），这个方法可能会把它们裁剪掉，你的场景里应该没问题。

3. 添加额外的清除浮动元素（不推荐）

在#header-bar的最后加一个空的div，设置clear:both，但会增加冗余HTML：

<div id="header-bar">
  <h1>Lewis' Website</h1>
  <img src="images/headericon.jpg" />
  <div style="clear:both;"></div>
</div>

可选替代方案（不用float） #

其实现在更推荐用Flexbox来实现h1和img的并排布局，完全避免浮动的问题，效果还更好：

#header-bar {
  display: flex;
  align-items: center; /* 让元素垂直居中对齐 */
}
#header-bar h1 {
  font-family: Arial;
  font-size: 70px;
  color: white;
  padding-left: 10%;
  /* 去掉float:left */
}
#header-bar img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  padding-right: 10%;
  padding-left: 10%;
}

这个方案不仅能实现你要的并排效果，还能轻松控制元素的对齐方式，比float更灵活。

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