本文介绍在无法修改 html 结构的前提下，利用 `float` 属性将同属一个父容器（如 `#header`）内的图片与文字分别定位到页面顶部左、右两侧的实用 css 解决方案。
当 HTML 结构受限（例如不能新增 class、不能调整嵌套层级或拆分容器）时，传统 text-align 或 margin: 0 auto 等居中/对齐方式往往失效——因为它们作用于块级容器整体，无法独立控制内部不同子元素的方向。此时，float 是一种轻量、兼容性好且无需改动 DOM 的经典解决方案。
在您的代码中，#picture 是 <img> 元素，位于 #header > div > img 路径下；而文字（<h1> 和后续 <div>）默认为文档流中的块级内容。只需为图片单独设置：
#picture {
float: left;
}即可将其脱离正常文档流，紧贴父容器 #header 的左侧边缘。与此同时，保持 #header { text-align: right; }，可使其中未浮动的内联或内联级内容（如 <h1> 文本、<div> 中的文字）整体右对齐——但需注意：text-align: right 对块级子元素（如 <h1>）的文本内容生效，而非整个 <h1> 标签本身的位置。因此，为确保 <h1> 及其后 <div> 显示在右侧，更稳妥的做法是让它们共同包裹在一个右对齐的容器中，或直接对 #header 内的非浮动子元素统一处理。
不过，根据您当前结构，以下完整 CSS 更具鲁棒性：
立即学习“前端免费学习笔记（深入）”；
#header {
background-color: blue;
overflow: hidden; /* 清除浮动，防止父容器高度塌陷 */
}
#picture {
float: left;
margin-right: 16px; /* 可选：为图片与右侧文字添加间距 */
}
/* 确保右侧文字区域靠右显示 */
#header > div:not(:first-child),
#header > div:first-child h1,
#header > div:first-child + div {
display: inline-block;
vertical-align: middle;
text-align: right;
}⚠️ 注意事项：
- float 会导致父容器高度塌陷，务必为 #header 添加 overflow: hidden（或 clearfix）以包含浮动子元素；
- 若后续需响应式适配，建议在现代项目中逐步迁移到 Flexbox（如 #header { display: flex; justify-content: space-between; align-items: center; }），但该方案需确保 #picture 和文字内容处于同一 flex 容器直系子级——这在您当前 HTML 不可修改的前提下暂不可行；
- 避免滥用 margin: 0 auto 配合 float，二者逻辑冲突：浮动元素不再受 auto 水平居中影响。
综上，在约束条件下，float: left 是精准、简洁且广泛兼容的首选方案。
