本文讲解在无法修改 html 结构的前提下，通过 `float` 属性精准控制 `` 和文字在页眉区域的左右对齐布局。

在实际前端开发中，常遇到「HTML 结构固定、仅能调整 CSS」的限制场景。如题所示：需将 固定于页面顶部左侧，同时让

HELLO

此时，margin: 0 auto（居中）或 text-align: right（仅影响内联/行内块级子元素的文本对齐）均无法单独作用于 img 元素——因为 text-align 对块级元素无效，而 margin: 0 auto 需要元素具有明确宽度且为块级流式布局，对默认 inline 的 效果有限。

✅ 正确解法是使用 float: left：

#picture {
  float: left;
}

#header {
  background-color: blue;
  text-align: right; /* 使内部的 h1 和 div 文字右对齐 */
}

该方案生效原理如下：

• float: left 将图片脱离普通文档流，紧贴容器左边缘；
• 后续兄弟元素（如

  和 ）会环绕浮动元素排列，但由于 #header 设置了 text-align: right，其内部非浮动的行内级内容（包括

  的文本和 的纯文字）自然右对齐；

  注意：

  默认为块级元素，text-align: right 对其内部文本有效；若需整个

  块右移，可额外添加 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 仍是解决简单左右分离布局的可靠工具。掌握其脱离文档流特性与清除浮动技巧，可高效应对类似“头图左置 + 标题右对齐”的经典需求。