本文讲解在无法修改 html 结构的前提下，通过 `float` 属性精准控制 `` 和文字在页眉区域的左右对齐布局。
在实际前端开发中，常遇到「HTML 结构固定、仅能调整 CSS」的限制场景。如题所示：需将 <img id="picture"> 固定于页面顶部左侧，同时让 <h1>HELLO</h1> 及后续文字显示在顶部右侧，但所有内容均被包裹在同一个 #header 容器内，且不能新增或重排 DOM 节点。
此时，margin: 0 auto（居中）或 text-align: right（仅影响内联/行内块级子元素的文本对齐）均无法单独作用于 img 元素——因为 text-align 对块级元素无效，而 margin: 0 auto 需要元素具有明确宽度且为块级流式布局，对默认 inline 的 <img> 效果有限。
✅ 正确解法是使用 float: left：
#picture {
float: left;
}
#header {
background-color: blue;
text-align: right; /* 使内部的 h1 和 div 文字右对齐 */
}该方案生效原理如下：
立即学习“前端免费学习笔记（深入）”；
- float: left 将图片脱离普通文档流，紧贴容器左边缘；
- 后续兄弟元素（如 <h1> 和 <div>）会环绕浮动元素排列，但由于 #header 设置了 text-align: right，其内部非浮动的行内级内容（包括 <h1> 的文本和 <div> 的纯文字）自然右对齐；
- 注意：<h1> 默认为块级元素，text-align: right 对其内部文本有效；若需整个 <h1> 块右移，可额外添加 display: inline-block 或配合 margin-left: auto（需父容器 display: flex，但本例禁用 HTML 修改，故不推荐）。
⚠️ 注意事项：
- 浮动元素可能导致父容器高度塌陷（即 #header 可能无法包裹浮动后的图片）。若出现背景色不显示或下方内容上移，需清除浮动。推荐在 #header 上添加 overflow: hidden 或 ::after 伪元素清除法（兼容性更佳）：
#header::after { content: ""; display: table; clear: both; } - 现代项目中，Flexbox（display: flex; justify-content: space-between）是更语义化、易维护的替代方案，但本题约束 HTML 不可改，故无法在 #header 上直接设 flex 并调整子元素顺序——因此 float 是最轻量、兼容性最佳的解决方案。
总结：当 HTML 结构受限时，float 仍是解决简单左右分离布局的可靠工具。掌握其脱离文档流特性与清除浮动技巧，可高效应对类似“头图左置 + 标题右对齐”的经典需求。
