当对 和 同时使用 float 时，元素会脱离文档流、紧贴容器边缘排列，若未显式设置宽度或外边距，则默认占据内容所需最小空间，导致视觉上“粘连”无间隙——根本原因在于浮动本身不自动创建间距，需手动控制尺寸与留白。

当对 `

` 和 `

` 同时使用 `float` 时，元素会脱离文档流、紧贴容器边缘排列，若未显式设置宽度或外边距，则默认占据内容所需最小空间，导致视觉上“粘连”无间隙——根本原因在于浮动本身不自动创建间距，需手动控制尺寸与留白。

在传统 CSS 浮动布局中，float: left 或 float: right 仅决定元素在行内如何“漂浮”，并不会自动分配水平空间或预留间隙。如原始代码所示：

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

此时

将尽可能向左收缩至其文本宽度（例如仅占 120px），

则紧贴容器右边缘向左收缩，二者中间的空白区域实际是未被任何元素占据的“自由空间”，但因父容器未清除浮动且子元素无尺寸约束，该区域不可控，常表现为视觉拥挤甚至重叠。

✅ 正确做法是：为浮动元素显式声明宽度 + 外边距（或内边距），确保它们在有限空间内合理分布。例如：

header {
  overflow: hidden; /* 清除浮动，防止父容器塌陷 */
}

h1 {
  float: left;
  width: 30%;
  margin-right: 5%; /* 在 h1 右侧预留明确间隙 */
  box-sizing: border-box;
}

nav {
  float: right;
  width: 60%;
  box-sizing: border-box;
}

? 关键要点说明：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

立即学习“前端免费学习笔记（深入）”；

• width 是必需的：避免浮动元素过度收缩，确保可预测的占位；
• margin-right（或 margin-left）用于主动控制间距：仅靠 float 无法生成间隙；
• 父容器需清除浮动：推荐使用 overflow: hidden 或伪元素 ::after，否则高度塌陷会导致后续内容错位；
• box-sizing: border-box 建议统一添加：使 padding/border 不影响设定的 width，提升布局稳定性。

⚠️ 注意事项：

• float 已属遗留布局方式，现代项目强烈推荐改用 Flexbox 或 Grid。例如一行两端对齐且留白，只需：

  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  简洁、健壮、无需清除浮动，且天然支持响应式。

• 若必须兼容旧浏览器，请务必测试不同字号/内容长度下的宽度适应性，避免换行或溢出。

总结：浮动本身不创造空间，间距必须由开发者通过 width、margin 和容器清理共同实现；理解这一机制，才能摆脱“为什么没空隙”的困惑，并为平滑过渡到现代布局方案打下基础。