本文介绍在无法修改 html 结构的前提下，通过 `float` 属性精准控制同一父容器内子元素的水平分布——将图片固定于页面左上角、文字内容对齐右上角。

在实际前端开发中，常遇到「HTML 结构不可修改，仅能通过 CSS 调整布局」的限制场景。如本例所示：

标签，目标是让图片独占左上区域、标题文字靠右显示——但若仅对父级 #header 设置 text-align: right，所有内联级内容（包括图片）都会右移；而 margin: 0 auto 则会使图片居中，无法满足左右分离需求。

此时，float 是简洁有效的解决方案。它允许元素脱离普通文档流，向指定方向（left 或 right）浮动，其余内容环绕排布。关键在于：

• 给 #picture 设置 float: left，使其紧贴容器左侧顶部；
• 同时确保右侧文字（如

  HELLO

  ）作为后续兄弟元素自然占据剩余空间，并借助 #header { text-align: right } 实现右对齐。

✅ 正确 CSS 写法如下：

#picture {
  float: left;
}

#header {
  background-color: blue;
  text-align: right;
  overflow: hidden; /* 推荐添加：清除浮动，防止父容器高度塌陷 */
}

⚠️ 注意事项：

• 必须清除浮动：由于 float 会导致父容器 #header 无法自动包裹浮动子元素（即高度塌陷），建议为 #header 添加 overflow: hidden（或 clearfix 伪类），确保背景色正常显示且布局稳定；
• 避免滥用 margin: 0 auto：该声明适用于块级元素水平居中，不适用于浮动定位；
• 现代替代方案：若项目支持较新浏览器，也可用 Flexbox（如 #header > div { display: flex; justify-content: space-between; }），但需注意本例中 HTML 嵌套层级使直接应用需谨慎——float 在此约束下反而更直接可靠。

综上，在受限 HTML 下，float: left 配合父级 text-align: right 是实现顶部左右分离的经典且兼容性极佳的方案。