float:left和float:right不能自动对齐，因二者各自向边界贴靠且不协商位置；必须同父、触发bfc（如display:flow-root）、控制总宽≤100%并注意html顺序。
不能只靠 float: left 和 float: right 就“自动对齐”——它们各自往边界贴，中间空隙不协商，必须控制参照系、宽度和容器行为。
父容器必须触发 BFC 且不塌陷
浮动元素脱离文档流，父容器若不主动“收住”，高度会塌成 0，导致视觉错位甚至压住下方内容。这不是 bug，是浮动的固有行为。
- 推荐用
display: flow-root（Chrome 64+/Firefox 59+/Edge 79+ 全支持），语义干净、无副作用 - 老项目可用
overflow: hidden，但注意可能意外裁剪box-shadow或position: absolute子元素 - 避免用
float: left给父容器自身设浮动，会把它也拖进浮动流，引发连锁错位
左右浮动元素必须同级、同父、总宽 ≤ 100%
两个元素如果不在同一个父容器里，它们各自参照的“包含块”可能不同（比如一个在 body，一个在某个 section），根本没法形成左右关系。
- HTML 结构必须是：
<div class="container"> <div class="left"></div> <div class="right"></div> </div>，不能跨层嵌套 - 务必设
box-sizing: border-box，否则width: 50%+padding: 8px实际就超了 - 总宽度建议留余量：比如左块
width: calc(50% - 8px)，右块width: calc(50% - 8px)，中间 16px 用父容器padding控制，比靠margin更稳
HTML 顺序影响垂直对齐，不是可有可无的细节
浮动元素的上下位置，取决于它们在 HTML 中的书写顺序和原始文档流位置，不是 CSS 层叠顺序决定的。
- 如果
float: right元素写在前面，它会先抢占父容器右上角；float: left元素只能从它下方找左空位 - 如果
float: right写在后面，且父容器宽度足够，它会尝试与前面的float: left“同行对齐” - 想稳定顶对齐，就把两个元素按视觉顺序写：
<div class="left"></div> <div class="right"></div>，并确保高度一致或用vertical-align: top（仅对 inline-level 有效，需配合display: inline-block等）
为什么现在更该用 Flex 或 Grid 替代 float 做左右对齐
浮动本意是图文环绕，不是为布局设计的。它的行为依赖文档流顺序、易受高度差异干扰、清除逻辑绕弯，响应式适配也困难。
- 用
display: flex只需三行：justify-content: space-between+ 两个子项，无塌陷、无宽度陷阱、顺序无关 - 用
display: grid更直接：grid-template-columns: 1fr auto，右块自动靠右，左块自适应 - 如果必须兼容 IE9 及以下，才考虑 float 方案；否则优先迁移，别为了“会用”而硬扛过时机制
真正难的不是写对 float: left 和 float: right，而是理解它们不“配对”、不“协商”、不“自动居中”——所有“对齐感”都来自你对容器、盒模型和 HTML 顺序的精确控制。一旦漏掉其中一环，结果就不可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
