本文介绍在无法修改 html 结构的前提下，通过 `float` 属性精准控制同一父容器内子元素的水平分布——将图片固定于页面左上角、文字内容对齐右上角。
在实际前端开发中，常遇到「HTML 结构不可修改，仅能通过 CSS 调整布局」的限制场景。如本例所示：
包含一个嵌套
，其内部同时存在 ![如何使用 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 是实现顶部左右分离的经典且兼容性极佳的方案。
