为什么使用浮动后标题h1和nav之间没有间距？

Question

我目前面临一个与在标题 h1 和导航栏上使用 float 相关的问题。我已经将 float: left 应用于两个元素，期望它们并排对齐，中间有一些间距。但是，我注意到它们之间没有空间，这导致设计看起来很杂乱。尽管应用了适当的 CSS 属性，但我对为什么会发生这种情况感到困惑。你能帮我理解这种意外行为背后的原因吗？

h1 {
  float: left;
}
nav {
  float: right;
}

尽管彻底检查了代码并利用了类和 id，但 h1 和 nav 元素之间缺少间距的问题，尽管对两者都应用了 float:left，但仍未解决。人们会期望元素自然地与此属性间隔开，但不幸的是，事实并非如此。这让我挠头并寻找替代解决方案来创建所需的布局。

Answer 1

这就是他们两个的所有代码吗？你可以玩弄“width”和“margin”，比如：

h1 {
  float: left;
  width:30%;
  margin-right:10%;
}
nav {
  float: right;
  width:60%;
}